Navigation

SideNavigation

Vertical navigation column that hosts grouped side-navigation-item entries with a required accessible label for the landmark.

import { SideNavigation } from '@lostgradient/cinder/side-navigation';
navigationsidebar
01

Overview

Vertical navigation panel for secondary or hierarchical app destinations.

Usage

SideNavigation is a compound component. Import the parent and compose SideNavigation.Group and SideNavigation.Item via the namespace API.

svelte 
<script lang="ts">
  import { SideNavigation } from '@lostgradient/cinder/side-navigation';
</script>

<SideNavigation ariaLabel="Workspace">
  <SideNavigation.Item href="/dashboard">Dashboard</SideNavigation.Item>
  <SideNavigation.Group label="Projects">
    <SideNavigation.Item href="/projects/phoenix" active>Phoenix</SideNavigation.Item>
    <SideNavigation.Item href="/projects/atlas">Atlas</SideNavigation.Item>
  </SideNavigation.Group>
</SideNavigation>

The leaves remain importable individually for à-la-carte builds — see @lostgradient/cinder/side-navigation-group and @lostgradient/cinder/side-navigation-item.

Live preview
02

When to use

Use when
  • Building a tall, dense application sidebar with many sections and nested groups.
  • Pairing with sidebar so the column collapses responsively on narrow viewports.
Avoid when
03

Examples

Basic side navigation

A grouped sidebar nav. Uses the SideNavigation namespace API: SideNavigation.Group wraps a collapsible section and SideNavigation.Item renders each link.

Compact sidebar spacing

Dense sidebars can tune the SideNavigation list gap through a public CSS variable.

Docs sidebar

Documentation sidebar with grouped navigation sections. The active item receives aria-current="page".

04

Props

Props for side-navigation
Name Type Default Required Bindable Description
ariaLabel text req Accessible name for the <nav> landmark. Required, non-empty, distinct from other navs on the page.
children snippet req Must be <li> elements containing NavigationItem and/or SideNavigationGroup.