Photonix

NavigationDrawer

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

Preview

Application content area

Usage
"use client";

import { useState } from 'react';
import { Box, Flex, NavigationDrawer, NavGroup, NavItem, Text } from '@photonix/ultimate';
import { CalendarOutline, DocumentOutline, SettingsOutline } from '@photonix/icons';

export default function NavigationDrawerBasicExample() {
    const [collapsed, setCollapsed] = useState(false);

    return (
        <Flex h={360} w="100%" align="stretch" border="1px solid var(--border-neutral-tertiary)" borderRadius="2xs" overflow="hidden">
            <NavigationDrawer
                collapsed={collapsed}
                collapsible
                onToggle={() => setCollapsed((value) => !value)}
            >
                <NavGroup label="Workspace">
                    <NavItem id="documents" label="Documents" icon={<DocumentOutline />} />
                    <NavItem id="calendar" label="Calendar" icon={<CalendarOutline />} />
                    <NavItem id="settings" label="Settings" icon={<SettingsOutline />} />
                </NavGroup>
            </NavigationDrawer>
            <Box flex={1} p="md" bg="primary">
                <Text color="secondary">Application content area</Text>
            </Box>
        </Flex>
    );
}

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

Variants

Nested Items

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

Nested Items
"use client";

import { AppsOutline, CalendarOutline, OptionOutline } from '@photonix/icons';
import { Box, NavGroup, NavigationDrawer, NavItem } from '@photonix/ultimate';

export default function NavigationDrawerVariantNestedExample() {
    return (
        <Box h={300} w="100%" border="1px solid var(--border-neutral-tertiary)" borderRadius="2xs" overflow="hidden">
            <NavigationDrawer>
                <NavGroup label="Categories">
                    <NavItem
                        id="n1"
                        label="Development"
                        icon={<AppsOutline />}
                        children={[
                            { id: 'n1-1', label: 'Frontend', icon: <OptionOutline size={20} /> },
                            { id: 'n1-2', label: 'Backend', icon: <OptionOutline size={20} /> },
                        ]}
                    />
                    <NavItem id="n2" label="Design" icon={<CalendarOutline />} />
                </NavGroup>
            </NavigationDrawer>
        </Box>
    );
}

Without Groups

For simple structures, list NavItems directly inside the drawer.

Without Groups
"use client";

import { AppsOutline, CalendarOutline, DocumentOutline } from '@photonix/icons';
import { Box, NavigationDrawer, NavItem } from '@photonix/ultimate';

export default function NavigationDrawerVariantFlatExample() {
    return (
        <Box h={300} w="100%" border="1px solid var(--border-neutral-tertiary)" borderRadius="2xs" overflow="hidden">
            <NavigationDrawer>
                <NavItem id="f1" label="Dashboard" icon={<AppsOutline />} selected />
                <NavItem id="f2" label="Inbox" icon={<DocumentOutline />} badge={12} />
                <NavItem id="f3" label="Calendar" icon={<CalendarOutline />} />
            </NavigationDrawer>
        </Box>
    );
}

Resizable

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

Resizable
"use client";

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

export default function NavigationDrawerVariantResizableExample() {
    return (
        <Box h={300} w="100%" border="1px solid var(--border-neutral-tertiary)" borderRadius="2xs" overflow="hidden">
            <NavigationDrawer resizable>
                <NavGroup label="Drag the edge">
                    <NavItem id="r1" label="Resizable Item" icon={<AppsOutline />} />
                </NavGroup>
            </NavigationDrawer>
        </Box>
    );
}

Small Size

Render smaller items while keeping nested items, badges, and disabled states.

Small Size
"use client";

import { AppsOutline, CalendarOutline, DocumentOutline, OptionOutline } from '@photonix/icons';
import { Box, NavGroup, NavigationDrawer, NavItem } from '@photonix/ultimate';

export default function NavigationDrawerVariantSmallExample() {
    return (
        <Box h={300} w="100%" border="1px solid var(--border-neutral-tertiary)" borderRadius="2xs" overflow="hidden">
            <NavigationDrawer>
                <NavGroup label="Main" size="sm" badge>
                    <NavItem id="sm1" label="Dashboard" icon={<AppsOutline size={20} />} size="sm" selected />
                    <NavItem id="sm2" label="Inbox" icon={<DocumentOutline size={20} />} size="sm" badge={12} />
                    <NavItem
                        id="sm-nested"
                        label="Development"
                        icon={<CalendarOutline size={20} />}
                        size="sm"
                        children={[
                            { id: 'sm-frontend', label: 'Frontend', icon: <OptionOutline size={20} />, size: 'sm' },
                            { id: 'sm-backend', label: 'Backend', icon: <OptionOutline size={20} />, size: 'sm', disabled: true },
                        ]}
                    />
                </NavGroup>
                <NavGroup label="Settings" size="sm">
                    <NavItem id="sm3" label="General" icon={<OptionOutline size={20} />} size="sm" />
                    <NavItem id="sm4" label="Archived" icon={<DocumentOutline size={20} />} size="sm" disabled />
                </NavGroup>
            </NavigationDrawer>
        </Box>
    );
}

On this page

Preview
Component API
Variants
Nested Items
Without Groups
Resizable
Small Size
Photonix UI - React Components, Templates & Figma Design System