Sidebar ​

Provides a vertical navigation panel for organizing links and actions. Supports sections, collapsible groups, and quick access to key features.

Default ​

Views

API Reference ​

Show types
typescript
import { RouteLocationRaw } from 'vue-router'

export type SidebarHeaderProps = {
  title: string
  subtitle?: string
  logo?: any // Icon component or image string
  menuItems?: {
    label: string
    icon: any // Icon component
    onClick?: () => void
  }[]
}

export type SidebarItemProps = {
  label: string
  accessKey?: string
  icon?: any // Icon component
  suffix?: string
  to?: RouteLocationRaw
  isActive?: boolean
  onClick?: () => void
}

export type SidebarSectionProps = {
  label?: string
  items: SidebarItemProps[]
  collapsible?: boolean
}

export type SidebarProps = {
  header?: SidebarHeaderProps
  sections?: SidebarSectionProps[]
  disableCollapse?: boolean
}
Prop Default Type
header
—
SidebarHeaderProps
sections
—
SidebarSectionProps[]
disableCollapse
—
boolean
collapsed
null
boolean
Slot Payload
header
{}
header-logo
{}
sidebar-item
{ item: SidebarItemProps; isCollapsed: false; }
footer-items
{ isCollapsed: boolean; isMobile: boolean; }
Event Payload
update:collapsed
[value: boolean]

Fired when the collapsed changes.

SelectSlider