RhombusKit

Nav List

<rhombus-nav-list> is a persistent, vertical, sectioned navigation list — the component that fills the app-shell's shellNav slot (and works as a docs sidebar or "link in bio" column). Router items self-highlight via routerLinkActive and render aria-current="page"; it's the first real consumer of the --nav-active-bg / --nav-active-text tokens.

Example

A grouped sidebar with icons, a trailing badge, an external link, and a disabled item. The Overview item is highlighted because it points at this very page — real router-driven active state.

When to use

  • As the persistent sidebar navigation inside the App shell's shellNav slot, for a desktop-first app with several destinations.
  • For any vertical list of links that needs section headings, icons, active state, and trailing badges — docs sidebars, settings panes, "link in bio" pages.

When not to use

  • For a mobile-first primary nav of 3–5 destinations, use the Bottom nav instead.
  • For a transient list of actions off a trigger, use a Menu — though menu items can now carry routerLink too.
  • For switching views within a page, use Tabs.

Related components

  • App shell — owns the layout; drop the nav list into its shellNav slot.
  • Bottom nav — the mobile-first counterpart.
  • Menu — transient, trigger-anchored navigation/actions.

Was this page helpful?