SideNav

Vertical sidebar with grouped items, counters, a footer and optional collapse toggle. Use size (xs, sm, md, lg, xl) to change density.

Jump to API reference

Import

Vue

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

Grouped

Vue

<UiSideNav
  brand="ZiyaraGo"
  value="tours"
  :items="[{ group: 'Catalog' }, { value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }, { group: 'Sales' }, { value: 'bookings', label: 'Bookings', icon: 'calendar-check', count: 4 }, { value: 'clients', label: 'Clients', icon: 'users' }]"
>
  <template #footer>v1.0</template>
</UiSideNav>

Collapsed

Vue

<UiSideNav
  brand="Z"
  collapsed
  value="home"
  :items="[{ value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }, { value: 'bookings', label: 'Bookings', icon: 'calendar-check', count: 4 }]"
 />

Sizes

Vue

<UiSideNav
  brand="ZiyaraGo"
  value="tours"
  :items="[{ value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }]"
  size="xs"
 />

<UiSideNav
  brand="ZiyaraGo"
  value="tours"
  :items="[{ value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }]"
  size="sm"
 />

<UiSideNav
  brand="ZiyaraGo"
  value="tours"
  :items="[{ value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }]"
  size="md"
 />

<UiSideNav
  brand="ZiyaraGo"
  value="tours"
  :items="[{ value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }]"
  size="lg"
 />

<UiSideNav
  brand="ZiyaraGo"
  value="tours"
  :items="[{ value: 'home', label: 'Home', icon: 'house' }, { value: 'tours', label: 'Tours', icon: 'map' }, { value: 'hotels', label: 'Hotels', icon: 'building-2' }]"
  size="xl"
 />

API reference

Vertical sidebar with a brand, grouped navigation items, a footer and an optional collapse toggle.

Props

PropType and valuesDefaultDescription

brandstring | VNode—Logo or product name at the top.

items({ value: string; label: string; icon?: string; count?: string | number } | { group: string })[]'[]'Entries. An object with group renders a section heading (hidden when collapsed); others are links with an optional icon and count.

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

collapsedbooleanfalseIcon-only mode; labels move to the title tooltip.

collapseLabelstring'Collapse'Label of the collapse button.

sizexssmmdlgxl'md'Scale of width (216 to 336 px), padding and item height.

Slots

Vue: named slots. React: a prop with the same name; default is children.

footerBottom area above the collapse button, e.g. user card. React also accepts a footer prop.

Events

Vue: @name. React: onName.

changeCalled with the value of the clicked item.

toggleCalled when the collapse button is clicked. The button is rendered only when this handler is set.

Notes

Collapsing is controlled: flip collapsed in the toggle handler.
Group entries are keyed by their title, so keep group names unique.