Sidebar
The app's only navigation list, rendered as AppShell's standing desktop panel and again inside its mobile Sheet drawer, where it sits between the drawer's own search control (top) and UserMenu (bottom). Either way it grows to fill its column and scrolls internally. nav is an array of groups, each an optional heading plus its entries; an entry may nest its own items, which reveal while the route sits inside them. Groups are separated by space alone rather than a rule, so a long list reads as one quiet column; a group can set divider to take a hairline above it, which is for a change of kind — prose guides above, a component index below — and not for the boundary between two peer groups, where a rule per group would turn the column into a form.
Groups and nesting
nav is groups, each an optional heading plus its entries; an entry with its own items reveals them while the route sits inside it. Groups are separated by space rather than a rule, so a long list reads as one quiet column. The panel sits straight on the page background with no surface of its own — navigation is not content, and only the main area's cards should read as panels. Hover a row anywhere across the column: the whole width is the link, and the tint stops at the label rather than painting a block the width of the panel.
<div class="h-96 w-72">
<Sidebar {nav} />
</div>A rule where the list changes kind
A group can set divider to take a hairline above it. Reach for it where the list stops being one thing and starts being another — a few guides above, the index they introduce below — and not between two peer groups, where a rule each would turn a quiet column into a form. It is skipped on the first group rendered, so filtering a list down to its tail cannot leave a rule floating at the top.
<div class="size-72">
<Sidebar
nav={[
{
items: [
{
href: '/docs/getting-started',
label: 'Getting started',
icon: Compass
},
{ href: '/docs/patterns', label: 'Patterns', icon: Shapes }
]
},
{
label: 'Catalogue',
divider: true,
items: [
{ href: '/components/data-table', label: 'Products' },
{ href: '/blocks/storefront', label: 'Storefront' }
]
}
]}
/>
</div>One current row, ever
Only the page you are on takes the bg-selected tint. A section whose *child* is current expands but stays plain — two filled rows would read as two locations. Nothing is dimmed to make that true: labels are never text-muted, because a dimmed destination reads as a disabled one.
<div class="h-64 w-72">
<Sidebar
nav={[
{
label: 'Where you are',
items: [
{ href: '/components/sidebar', label: 'Current page', icon: Package },
{ href: '/components/section-nav', label: 'A sibling', icon: Store }
]
}
]}
/>
</div>API
| Prop | Type | Default | Description |
|---|---|---|---|
nav | NavGroup[] | [] | Groups rendered top to bottom. |
homeHref | string | '/' | Route treated as the app root, forwarded to each entry. |
class | string | '' | Additional Tailwind classes merged onto the root |
top | import('svelte').Snippet | Rendered above the groups, for a control that applies to the whole section rather than one entry (a display-mode switch, say). |
NavItem
| Prop | Type | Default | Description |
|---|---|---|---|
href required | string | Route the entry links to. | |
label required | string | Text shown beside the icon. | |
icon | import('svelte').Component | Leading icon component. | |
badge | string|number | Leading step marker shown instead of an icon (e.g. a step number), when the entries are steps in a sequence rather than app destinations. | |
playing | boolean | Marks the entry with a live pulsing dot — e.g. audio tied to that section is currently playing — independent of whether it's the current route/section. | |
items | NavItem[] | Nested entries, revealed while the route is inside |
NavGroup
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | Section heading. Omit for the leading, unlabelled block. | |
divider | boolean | Draws a rule above the group, marking where the list changes kind. Ignored on the first group rendered, where there is nothing above to divide from. | |
items required | NavItem[] | Entries in this group. |