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.

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.

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.

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 <nav>.

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 href.

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.