Navigation

SideNavigationItem

Single list-wrapped navigation entry tuned for the vertical layout of side-navigation, delegating rendering to navigation-item.

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

Overview

Individual link within a side navigation, supporting nesting and active highlighting.

Usage

SideNavigationItem is a compose-only leaf of SideNavigation. The idiomatic API is SideNavigation.Item, reached through the parent namespace — see the side-navigation README for the composed snippet. The flat @lostgradient/cinder/side-navigation-item subpath remains exported for à-la-carte builds that import the leaf directly.

02

When to use

Use when
  • Rendering one entry inside a side-navigation column or side-navigation-group.
  • Keeping list semantics correct so screen readers announce sidebar entry counts.
Avoid when
  • Placing entries in a horizontal navigation-bar — use navigation-item directly.
  • Rendering outside a side-navigation list — use navigation-item without the list wrapper.