Photonix UI - React Components, Templates & Figma Design System

NavigationDrawer

A flexible side navigation drawer for managing complex hierarchies within an application.

Preview

Content Area

The drawer is currently expanded. Hover over the edge to see the expand button.

Usage

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

<NavigationDrawer collapsible onToggle={...}>
  <NavGroup label="Main">
    <NavItem id="home" label="Home" icon={<Apps />} />
  </NavGroup>
</NavigationDrawer>

Variants

Nested Items

Items can have multi-level children for complex navigation trees.

Nested Items

<NavItem label="Parent" children={[{ id: 'child1', label: 'Child' }]} />

Without Groups

For simple structures, you can list NavItems directly inside the drawer.

Without Groups

<NavigationDrawer>
  <NavItem id="home" label="Home" icon={<Apps />} />
</NavigationDrawer>

Resizable

Enable the 'resizable' prop to allow users to customize the drawer width by dragging the right edge.

Resizable

<NavigationDrawer resizable onResize={(w) => ...} />

Small Size (with all variants)

Render smaller items with the size prop. Supports all features like nested items, icons, badges, and disabled states.

Small Size (with all variants)

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

Component API

NavigationDrawer

Prop	Type	Default	Description
children	`React.ReactNode`	`-`	Drawer content (NavGroup, NavItem components)
collapsed	`boolean`	`false`	Whether drawer is collapsed
collapsible	`boolean`	`false`	Enable collapse/expand button on hover
onToggle	`(() => void)`	`-`	Callback when collapse/expand button is clicked
resizable	`boolean`	`false`	Enable resizable drawer
onResize	`((width: number) => void)`	`-`	Callback when drawer is resized
sticky	`boolean`	`false`	Enable sticky positioning
topOffset	`string \| number`	`0`	Top offset when sticky (default: 0)
className	`string`	`-`	Additional class name
style	`React.CSSProperties`	`-`	Inline style

NavigationDrawer

Preview

Content Area

Variants

Nested Items

Without Groups

Resizable

Small Size (with all variants)

Component API

NavigationDrawer

On this page