App Sidebar

Collapsible navigation sidebar with support for branding and custom items.

layout stable packages/design-system/src/components/svelte/AppSidebar.svelte
Surface
Viewport

Component preview for App Sidebar

Presets

Props

Whether the sidebar is in collapsed mode
Application title displayed in header

Usage

<AppSidebar
  title="Admin Console"
  collapsed={false}
  navItems={[
    { label: 'Home', href: '/', icon: Home },
    { label: 'Settings', href: '/settings', icon: Settings }
  ]}
/>

Event Log

Interact with the component to see events

Accessibility

Uses semantic <aside> and <nav> tags. Manages focus and aria-labels for toggle button.