SideBarMenu Component

Interactive

A collapsed icon strip that flies out a labelled popout on hover/click. Hover Operations or Administration in the strip to see the fly-right popout; outside-click and Esc close. Events demos a count badge, Support an icon-only badge.

Current path: /circuits

import { SideBarMenu } from 'svelte-ui';
import type { SideBarMenuItem } from 'svelte-ui';
import IconActivity from '~icons/mdi/pulse';

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

const topItems: SideBarMenuItem[] = [
  { icon: IconActivity, label: 'Circuits', link: '/circuits' },
  { icon: IconFile, label: 'Events', link: '/events', badge: { variant: 'info', count: 12 } },
];
const bottomItems: SideBarMenuItem[] = [
  { icon: IconBriefcase, label: 'Operations', children: [
    { icon: IconUsers, label: 'Users', link: '/admin/users' },
  ]},
];

<SideBarMenu {topItems} {bottomItems} {currentPath} class="w-48" />