Photonix UI - React Components, Templates & Figma Design System

NavigationRail

A premium side navigation container designed for desktops. It balances high-level navigation with detailed content groups.

Preview

Dashboard

Select an item from the rail to see detailed information.

Usage

import { NavigationRail, NavItem, NavGroup } from '@photonix/ultimate';

<NavigationRail mode="expanded">
  <NavGroup label="Main">
    <NavItem id="home" label="Home" icon={<Apps />} selected />
    <NavItem id="settings" label="Settings" icon={<Option />} />
  </NavGroup>
</NavigationRail>

Variants

Collapsed Mode

Switch to 'collapsed' for a rail-style view focused purely on icons. Tooltips automatically show on hover.

Collapsed Mode

<NavigationRail mode="collapsed">...</NavigationRail>

With Groups

Organize items into manageable sections that can be expanded or collapsed.

With Groups

<NavGroup label="Management" expanded={true}>...</NavGroup>

Application Structure

A real-world example combining Logo, Search, Upgrade Incentives, and User Profiles.

Application Structure

<NavigationRail
  header={<Logo height={48} />}
  footer={<UserCard />}
>
  {children}
</NavigationRail>

Nested Items

Navigation items can contain children to support deeper tree structures.

Nested Items

<NavItem
  label="Advanced Settings"
  children={[
    { id: 'sub1', label: 'Security' },
    { id: 'sub2', label: 'API Keys' }
  ]}
/>

Floating Style

Use the 'floating' prop to add shadow and border, making the rail stand out from the main content surface.

Floating Rail Content

Floating Style

<NavigationRail floating>...</NavigationRail>

Text Only

For minimalist designs, NavItems can render without icons.

Text Only

<NavItem id="t1" label="Dashboard" />

Small Size (with all variants)

Use the size prop on NavGroup and NavItem to render smaller items. Supports all features like nested items, icons, badges, and disabled states.

Small Size (with all variants)

<NavigationRail mode="expanded">
  <NavGroup label="Main" size="sm">
    <NavItem id="home" label="Home" icon={<Apps size={20} />} size="sm" />
  </NavGroup>
</NavigationRail>

Component API

NavigationRail

Prop	Type	Default	Description
mode	`"expanded" \| "collapsed"`	`'expanded'`	Sidebar mode
header	`React.ReactNode`	`-`	Header content (logo, search, etc.) - fixed at top
children	`React.ReactNode`	`-`	Navigation items - scrollable middle section
footer	`React.ReactNode`	`-`	Footer content (CTA, ads, sticky items) - fixed at bottom
expandedWidth	`number`	`280`	Width when expanded
className	`string`	`-`	Additional class name
height	`string \| number`	`'100%'`	Height of the rail (default: 100%)
floating	`boolean`	`false`	Whether to show a floating effect with shadow/border
showFooterDivider	`boolean`	`true`	Whether to show a divider at the top of the footer (default: true)
style	`React.CSSProperties`	`-`	Optional style object

NavGroup

Prop	Type	Default	Description
label	`string`	`-`	Group label
expanded	`boolean`	`true`	Is group expanded
hideChevron	`boolean`	`false`	Hide the expand/collapse chevron
badge	`boolean`	`-`	Badge content (boolean for dot)
children	`React.ReactNode`	`-`	Child items
onToggle	`(() => void)`	`-`	On expand/collapse
size	`"sm" \| "md"`	`'md'`	Size of the group header
isFirstGroup	`boolean`	`-`	Internal: Is this the first group in the list

NavItem

Prop	Type	Default	Description
id	`string`	`-`	Unique identifier
label	`string`	`-`	Item label
icon	`React.ReactNode`	`-`	Leading icon (optional)
badge	`number`	`-`	Badge content (number only)
selected	`boolean`	`false`	Is this item selected
disabled	`boolean`	`false`	Is this item disabled
children	`NavItemProps[]`	`-`	Nested items (for tree structure)
level	`number`	`0`	Indentation level
size	`"sm" \| "md"`	`'md'`	Size of the item
onClick	`((id: string) => void)`	`-`	Click handler

NavigationRail

Preview

Dashboard

Variants

Collapsed Mode

With Groups

Application Structure

Nested Items

Floating Style

Floating Rail Content

Text Only

Small Size (with all variants)

Component API

NavigationRail

NavGroup

NavItem

On this page