Dowe

NAVIGATION

RailNav

RailNav creates a narrow vertical menu with portable icons, accessible tooltips, and optional labels below each icon.

ICON-ONLY

A compact rail by default

Each item requires a label and a Solar icon. On web and desktop, hover or keyboard focus reveals the label in a Tooltip positioned after the rail. Native targets expose the same label to accessibility services.

RailNav variant:"ghost" scheme:"primary" size:"md"
  item label:"RailNav" href:"/docs/views/navigation/railnav" icon:"route"
  divider
  item label:"Overview" href:"/docs/views" icon:"home"
  item label:"Explore" href:"/explore" icon:"compass"
  item label:"Saved" href:"/saved" icon:"bookmark"
  item label:"Settings" href:"/settings" icon:"settings"

OPTIONAL LABELS

Text below the icon

Set showLabels:true when every destination should remain visible. RailNav centers the label below its icon, keeps it to one line, and preserves the narrow width selected by size. Because the label is visible, no duplicate tooltip is generated.

RailNav showLabels:true size:"sm" variant:"soft" scheme:"muted"
  item label:"Home" href:"/" icon:"home"
  item label:"Map" href:"/map" icon:"map"
  item label:"Saved" href:"/saved" icon:"bookmark"

VISUAL OPTIONS

Variants, schemes, and sizes

Visual props apply to hover, focus, press, and active destination states without changing the rail structure.

Variants

Schemes

Sizes

PORTABLE CONTRACT

Icon and Tooltip are built in

The icon prop resolves through the same Solar catalog and vector model as Icon. In icon-only web and desktop output, RailNav reuses Tooltip styling, positioning, hover, and focus behavior automatically.

Items accept navigation or an onClick function, never both. divider is the only other direct child; headers, descriptions, statuses, submenus, and custom SVG icons belong in SideNav.

RailNav variant:"soft" scheme:"primary"
  item label:"Home" href:"/" icon:"home"
  item label:"Explore" href:"/explore" navigate:"replace" icon:"compass"
  divider
  item label:"Settings" onClick:openSettings icon:"settings"

API

RailNav props

RailNav also accepts applicable common identity, spacing, sizing, visibility, radius, and border props.

Prop	Type	Default
No data There are no records to display

Item props

label and icon are required static values. i18n can translate the accessible or visible label while preserving its deterministic fallback.

Prop	Type	Behavior
No data There are no records to display

No data

No data