List Nav

With title — settings & section jumpers

The most common shape: an eyebrow title above a vertical list of buttons. Each item is a real <button> by default — wire onClick to scroll, navigate, or filter. The active row uses brand-aware tokens (bg-primary-muted + text-primary-strong) so it picks up the current theme automatically and emits aria-current="page".

Without title — flat filter list

Omit title when the list is a single group that doesn't need an eyebrow — e.g. a status filter in a side panel where the panel's own heading already labels the section.

With leading icons — sidebar-adjacent nav

An icon on each item adds a scannable visual anchor without making the list feel as heavy as a full app-shell Sidebar. The icon column is fixed at size-4 so labels stay aligned.

Trailing slot — counts & badges

Pass a trailing node to add a Badge, count, or shortcut hint to the inline-end of an item. The slot is independent of the label so it stays glued to the right edge in LTR and the left edge in RTL automatically.

Inset alignment — mixed icon & plain rows

When a list mixes items with and without icons, pass inset on the icon-less ones to reserve the icon column and keep labels aligned. Without inset, plain items slide left where the icon would be.

Stacked groups — table of contents

Compose multiple ListNavs vertically when the navigation needs more than one group — each owns its own title. This is exactly the pattern the playground's own left navigation uses.

Sizes — base · lg

size="base" (default) is compact for dense desktop lists; size="lg" adds padding and a larger label + icon for a comfortable, touch-friendly tap target.