Menu
Sidebar
The collapsible application sidebar: navigation with sub-lists, that shrinks to its icons and becomes a drawer on small screens.
WAI-ARIA tested
Import
main.ts
import { Sidebar } from '@vitral/vue';Collapsible to icons
Off canvas
API
Read from packages/vue/src/components/Sidebar/types.ts, so it says what the component actually accepts.
Props
| Name | Type | Description |
|---|---|---|
| model | MenuItem[] | The navigation. A top-level item with `items` is a labelled group; an item with `items` inside a group opens a sub-list in place. Items are links (`url`) or buttons (`command`). |
| collapsible | 'icon' | 'offcanvas' | 'none' | How it collapses: to its icons (the default), off the canvas entirely, or not at all. |
| side | 'left' | 'right' | Which edge it sits on. Defaults to `'left'`. |
| activeKey | string | The key of the item for the current page; it is marked `aria-current="page"`. Items with `active` are marked too. |
| mobileBreakpoint | string | Below this width it becomes a drawer opened with `v-model:visible`. Defaults to `'768px'`. |
| showToggle | boolean | Show the collapse button in the header. Defaults to true. |
| ariaLabel | string | Names the navigation. Defaults to the locale's "Navigation". |
Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.
Emits
| Event | Payload | Description |
|---|---|---|
| item-click | event: { originalEvent: Event; item: MenuItem } | — |
Slots
| Name | Slot props | Description |
|---|---|---|
| header | (props: { collapsed: boolean }) | Above the navigation: a logo, a workspace switcher. |
| footer | (props: { collapsed: boolean }) | Below it: the signed-in user. |
| default | (props: { collapsed: boolean }) | More content after the model's groups. |
| item | (props: { item: MenuItem; collapsed: boolean; active: boolean }) | An item's content. |