Component · Navigation

Nav rail

a vertical rail of icon destinations; pairs with nav-icon and nav-divider.

Example

Where available

✓ React
✓ Angular
✓ Web Components
✓ Blazor
✓ Tokens

Using it

the same component, named idiomatically per target. one CSS contract underneath, so they render identically.

TargetReferencePackage
React <NavRail> @design-foundry/lucent-react
Angular <lucent-nav-rail> @design-foundry/lucent
Web Components <lucent-nav-rail> @design-foundry/lucent-wc
Blazor <LucentNavRail> DesignFoundry.Lucent

API

PropTypeDefaultDescription
nav-icon · name string — glyph for each destination.
nav-icon · active boolean false current destination.
nav-icon · label string — accessible name + tooltip.
nav-divider element deprecated use <Divider> (plain) to separate groups instead.