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 type { 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.

SidebarHeader ​

Show types
typescript
import type { 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
title*
—
string
subtitle
—
string
logo
—
any
menuItems
—
{ label: string; icon: any; onClick?: (() => void); }[] | undefined
Slot Payload
logo
{}

SidebarItem ​

Show types
typescript
import type { 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
label*
—
string
accessKey
—
string
icon
—
any
suffix
—
string
to
—
string | kt | Tt
isActive
—
boolean
onClick
—
(() => void)
Slot Payload
icon
{}
suffix
{}

SidebarSection ​

Show types
typescript
import type { 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
label
—
string
items*
—
SidebarItemProps[]
collapsible
—
boolean
Slot Payload
sidebar-item
{ item: SidebarItemProps; isCollapsed: false; }
Introduction