NavigationRail

NavigationRail renders a 64px wide rail with stacked icon + label items. Use when the canvas is dense and a full SideNav would crowd the layout.

#Default usage

<NavigationRail>
  <NavigationRailItem active href="#home" icon={<span>🏠</span>} label="Home" />
  <NavigationRailItem badge={2} href="#inbox" icon={<span>📥</span>} label="Inbox" />
  <NavigationRailItem href="#settings" icon={<span>⚙️</span>} label="Settings" />
</NavigationRail>

#Import

import { NavigationRail, NavigationRailItem } from "@froggdesign/enter-ui-react";

#Accessibility

The root is <nav> with aria-label="Primary" by default. Active items announce aria-current="page". Labels remain visible (not screen-reader only) so the rail stays usable for sighted users.

#API

• NavigationRailItem requires icon and label. Optional active toggles aria-current. Optional badge overlays a count.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.