SubNav

Secondary vertical menu for sections inside a page, with icons and badges. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue

import { UiSubNav } from '@ziyarago/ui/vue'

Settings

Vue

<UiSubNav
  title="Settings"
  value="profile"
  :items="[{ value: 'profile', label: 'Profile', icon: 'user' }, { value: 'security', label: 'Security', icon: 'shield' }, { value: 'notifications', label: 'Notifications', icon: 'bell', badge: 3 }, { value: 'billing', label: 'Billing', icon: 'credit-card' }]"
 />

Sizes

Vue

<UiSubNav
  title="Settings"
  value="profile"
  :items="[{ value: 'profile', label: 'Profile', icon: 'user' }, { value: 'security', label: 'Security', icon: 'shield' }]"
  size="xs"
 />

<UiSubNav
  title="Settings"
  value="profile"
  :items="[{ value: 'profile', label: 'Profile', icon: 'user' }, { value: 'security', label: 'Security', icon: 'shield' }]"
  size="sm"
 />

<UiSubNav
  title="Settings"
  value="profile"
  :items="[{ value: 'profile', label: 'Profile', icon: 'user' }, { value: 'security', label: 'Security', icon: 'shield' }]"
  size="md"
 />

<UiSubNav
  title="Settings"
  value="profile"
  :items="[{ value: 'profile', label: 'Profile', icon: 'user' }, { value: 'security', label: 'Security', icon: 'shield' }]"
  size="lg"
 />

<UiSubNav
  title="Settings"
  value="profile"
  :items="[{ value: 'profile', label: 'Profile', icon: 'user' }, { value: 'security', label: 'Security', icon: 'shield' }]"
  size="xl"
 />

API reference

Compact vertical list of sections with an optional title; use for settings and secondary page navigation.

Props

PropType and valuesDefaultDescription

titlestring—Small heading above the list; also the aria-label.

items{ value: string; label: string; icon?: string; badge?: string | number }[]'[]'Entries. badge renders a counter on the right.

valuestring—Value of the active item (aria-current="page").

sizexssmmdlgxl'md'Scale of item height and text.

Events

Vue: @name. React: onName.

changeCalled with the value of the clicked item.