@agala-labs/ui

Sidebar

Navigates hierarchical product areas across desktop and mobile.

Examples

Default

Workspace

<AgalaSidebar v-model:active-value="active" v-model:expanded="expanded" :items="items" responsive />

Import

import { AgalaSidebar, AgalaSidebarGroup, AgalaSidebarItem, AgalaSidebarToggle } from '@agala-labs/ui'

API

Prop	Type	Default	Description
items	SidebarNode[]	—	Data-driven navigation tree.
activeValue	string	—	Selected item.
expanded / defaultExpanded	string[]	—	Controlled or initial open branches.
collapsed	boolean	—	Desktop collapsed state.
open	boolean	—	Mobile drawer state.
responsive	boolean	false	Enables responsive behavior.
indent	'compact' | 'comfortable'	—	Nested density.
width / collapsedWidth	string	—	CSS widths.

Events

• update:activeValue
• update:expanded
• update:collapsed
• update:open
• select(value)

Slots

• default
• SidebarItem: icon and default

Accessibility

Tree branches expose expansion state, coordinate their disclosure and chevron motion, respect reduced motion, and keep the selected surface on the active leaf. Use SidebarToggle with aria-controls for mobile or collapsed navigation.