SideBarMenu

The site navigation on the left is a live SideBarMenu (this app dogfoods it). Below is a playground — drive the props with the controls and the code sample stays in exact sync.

Playground

A small set that exercises each recent behaviour. Hover a parent for its fly-out popout: Reports children all have icons (aligned column) — and its Exports child cascades into a third tier; Library's children have no icons (no column, compact + content-fit); Projects is mixed (icon-less rows keep an aligned slot). Account uses a custom popout, and Network view uses activeMatch. auto mode follows the responsive default; picking a mode forces it. Drawer/stepped are overlays — use Open. Active row: /dashboard.

side

modes

Size

Variant

interactMode

iconHoverExpand

Page content — the strip is docked right. Click a path to set the active row:

?via=network activates Network view via its activeMatch — not the plain Dashboard row.
publishWidthVar → strip width is var(--sbm-current-width): —

Code

import { SideBarMenu } from '@spaethtech/svelte-ui';
import type { SideBarMenuItem } from '@spaethtech/svelte-ui';
import IconDashboard from '~icons/mdi/view-dashboard';

let currentPath = $state('/dashboard');

const items: SideBarMenuItem[] = [
  { icon: IconDashboard, label: 'Dashboard', link: '/dashboard', badge: { variant: 'error' } },
  // all-icon children → the popout reserves + aligns the icon column
  { icon: IconChartBar, label: 'Reports', children: [
    { icon: IconChartLine, label: 'Usage', link: '/reports/usage' },
    { icon: IconCard, label: 'Billing', link: '/reports/billing', badge: { variant: 'info', count: 3 } },
  ]},
  // no-icon children → no column, compact + content-fit popout
  { icon: IconBook, label: 'Library', children: [
    { label: 'Docs', link: '/docs' },
    { label: 'API Reference', link: '/api' },
  ]},
  // active ONLY when ?via=network is present (other query params ignored)
  { icon: IconLan, label: 'Network view', link: '/dashboard?via=network',
    activeMatch: { path: '/dashboard', query: { via: 'network' } } },
];
const bottomItems: SideBarMenuItem[] = [
  { icon: IconFolder, label: 'Projects', children: [
    { icon: IconRocket, label: 'Aurora', link: '/p/aurora' },
    { label: 'Basalt', link: '/p/basalt' },        // no icon → still aligned via an empty slot
  ]},
  { icon: IconAccount, label: 'Account', popout: accountCard }, // custom popout content
];

<SideBarMenu
  {items}
  {bottomItems}
  {currentPath}
  side="right"
  iconHoverExpand
/>