Sidebar

Full-featured navigation sidebar with collapsible icon rail, nested items, badges, and fully customizable active styles and animations.

Import

ts 
import Sidebar from '$lib/components/Sidebar.svelte';
import type { NavSection } from '$lib/components/Sidebar.svelte';

Playground

Tweak every option live — one sidebar, all props.

mode

itemStyle

variant

collapsible

activeIndicator

animation

svelte 
<script lang="ts">
  import Sidebar from '$lib/components/Sidebar.svelte';
  import type { NavSection } from '$lib/components/Sidebar.svelte';

  const sections: NavSection[] = [
    {
      items: [
        { id: 'home',  label: 'Home',  icon: '...svg path...', href: '/' },
        { id: 'inbox', label: 'Inbox', icon: '...svg path...', href: '/inbox', badge: 3 },
      ],
    },
    {
      title: 'Workspace',
      items: [
        { id: 'team', label: 'Team', icon: '...svg path...', href: '/team' },
      ],
    },
  ];

  let active    = $state('home');
  let collapsed = $state(false);
  let open      = $state(false);  // mobile drawer state
</script>

<div style="position: relative; height: 560px; overflow: hidden;">
  <Sidebar
    {sections}
    bind:active
    bind:collapsed
    bind:open
    mode="auto"
    itemStyle="default"
    variant="default"
    collapsible="icon"
    activeIndicator="bar"
    animation="smooth"
    mobileContained
  />
</div>

Header & Footer Snippets

Pass header and footer snippets for a custom top and bottom area. Both receive collapsed.

svelte 
<Sidebar {sections} bind:active>
  {#snippet header({ collapsed })}
    <div style="display:flex; align-items:center; gap:0.5rem;">
      <div class="logo-icon">A</div>
      {#if !collapsed}<span>Ambar UI</span>{/if}
    </div>
  {/snippet}

  {#snippet footer({ collapsed })}
    <button onclick={signOut}>
      <svg><!-- logout icon --></svg>
      {#if !collapsed}<span>Sign out</span>{/if}
    </button>
  {/snippet}
</Sidebar>

API Reference

PropTypeDefaultDescription
sections NavSection[]—Navigation data. Each section has an optional title and items array.
active string''$bindable. ID of the currently active nav item.
collapsed booleanfalse$bindable. When true shows icon-only rail.
open booleanfalse$bindable. Mobile drawer open state.
width number240Expanded width in pixels.
variant 'default' | 'floating' | 'inset''default'Shell visual style.
itemStyle 'default' | 'filled' | 'ghost' | 'outline''default'Active item highlight style.
activeIndicator 'bar' | 'track' | 'none''bar'Active state indicator position.
animation 'smooth' | 'snappy' | 'calm' | 'none''smooth'Collapse & item transition speed.
collapsible 'icon' | 'offcanvas' | 'none''icon'Collapse behavior.
mode 'auto' | 'desktop' | 'mobile''auto'Rendering mode. auto switches to mobile drawer below 768px. mobile forces drawer, desktop forces sidebar.
mobileContained booleanfalseConstrains mobile drawer to the parent container instead of the viewport.
header Snippet<[{ collapsed: boolean }]>—Custom top area. Receives collapsed state.
footer Snippet<[{ collapsed: boolean }]>—Custom bottom area. Receives collapsed state.
onselect (id: string) => void—Fires when user selects a nav item.