Navigation rail

Navigation rails let people switch between UI views on mid-sized devices

Usage

NavigationRail provides primary navigation for an app. Use NavigationRail with NavigationRailItem children. Optionally include a Fab and sections.

import { NavigationRail, NavigationRailItem, NavigationRailSection, Fab } from "@udixio/ui-react"

<NavigationRail>
  <NavigationRailItem icon={faBell} iconSelected={faBell} selected>
    Alarm
  </NavigationRailItem>
  <NavigationRailItem icon={faClock} iconSelected={faClock}>
    Clock
  </NavigationRailItem>
  <NavigationRailItem icon={faHourglass} iconSelected={faHourglass}>
    Timer
  </NavigationRailItem>
  <NavigationRailItem icon={faStopwatch} iconSelected={faStopwatch}>
    Stopwatch
  </NavigationRailItem>
</NavigationRail>

Alignment

alignment: “top” (default) | “middle”

Extended rail

Toggle the extended mode to reveal labels and optional sections. You can control it with the extended and onExtendedChange props.

Controlled selection

Use selectedItem and setSelectedItem to control the selected item. onItemSelected notifies with index, label, and icon.