menu_open

Navigation drawer & btn nav

Side drawer navigation with grouped links.

Navigation_drawer Examples

Copy-ready examples with live previews.

Basic usage

Controlled drawer (isOpen / onOpenChange) with navigation items inside.

Live preview

NavigationDrawer is a wrapper around Sheet_side. It forwards most props and maps children to the body.

Content row 1

Content row 2

Content row 3

Content row 4

Content row 5

Content row 6

Content row 7

Content row 8

Content row 9

Content row 10

Content row 11

Content row 12

Content row 13

Content row 14

Content row 15

Content row 16

Content row 17

Content row 18

import { useState } from "react";
import NavigationDrawer from "@/_components/navigation_drawer/Navigation_drawer";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>Open</button>

      <NavigationDrawer isOpen={open} onOpenChange={setOpen} title="Navigation drawer">
        <div style={{ padding: 12 }}>Drawer content</div>
      </NavigationDrawer>
    </>
  );
}

Collapsible / minimized

Use isCollapsed to render the minimized size and pass it to Button_navigation items.

Live preview

Content row 1

Content row 2

Content row 3

Content row 4

Content row 5

Content row 6

Content row 7

Content row 8

Content row 9

Content row 10

Content row 11

Content row 12

Content row 13

Content row 14

Content row 15

Content row 16

Content row 17

Content row 18

import { useState } from "react";
import NavigationDrawer from "@/packages/ui/src/_components/navigation_drawer/Navigation_drawer";

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

  return (
    <NavigationDrawer
      isOpen={open}
      onOpenChange={setOpen}
      isCollapsed={collapsed}
      onCollapsedChange={setCollapsed}
    >
      {/* nav items */}
    </NavigationDrawer>
  );
}

Side + scrim

Switch between left/right and enable overlay scrim.

Live preview

Use side to pick where the drawer comes from. Use showScrim to enable the overlay.

Content row 1

Content row 2

Content row 3

Content row 4

Content row 5

Content row 6

Content row 7

Content row 8

Content row 9

Content row 10

Content row 11

Content row 12

Content row 13

Content row 14

Content row 15

Content row 16

Content row 17

Content row 18

import NavigationDrawer from "@/packages/ui/src/_components/navigation_drawer/Navigation_drawer";

export default function Example() {
  return (
    <NavigationDrawer isOpen onOpenChange={() => {}} side="right" showScrim>
      <div>Drawer</div>
    </NavigationDrawer>
  );
}

Docs-like tree

Button_navigation groups + sub items (controlled expand/collapse).

Live preview

Content row 1

Content row 2

Content row 3

Content row 4

Content row 5

Content row 6

Content row 7

Content row 8

Content row 9

Content row 10

import { useState } from "react";
import NavigationDrawer from "@/packages/ui/src/_components/navigation_drawer/Navigation_drawer";
import Button_navigation from "@/packages/ui/src/_components/navigation_drawer/button_navigation/Button_navigation";

export default function Example() {
  const [expanded, setExpanded] = useState<Record<string, boolean>>({ components: true });

  return (
    <NavigationDrawer isOpen onOpenChange={() => {}} title="Sections">
      <Button_navigation
        label="Components"
        iconName="apps"
        subItems={<div>...</div>}
        isExpanded={!!expanded.components}
        onExpandedChange={(next) => setExpanded(m => ({ ...m, components: next }))}
      />
    </NavigationDrawer>
  );
}

Interactive playground

Quick way to validate combinations inside the live preview container.

Live preview

side

size(ignored when isCollapsed=true)

radius

Content row 1

Content row 2

Content row 3

Content row 4

Content row 5

Content row 6

Content row 7

Content row 8

Content row 9

Content row 10

Content row 11

Content row 12

Content row 13

Content row 14

Content row 15

Content row 16

Content row 17

Content row 18

import { useState } from "react";
import NavigationDrawer from "@/packages/ui/src/_components/navigation_drawer/Navigation_drawer";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <NavigationDrawer
      isOpen={open}
      onOpenChange={setOpen}
      side="left"
      size="medium"
      title="Navigation drawer"
      showScrim
      radius="sm"
      style="standard"
      offset="none"
    >
      {/* nav items */}
    </NavigationDrawer>
  );
}

On this page

Navigation_drawer Props

Navigation_drawer — Props
Prop	Type	Required	Default	Description
isOpen	boolean	Yes	—	Controls whether the drawer is visible.
onOpenChange	(v: boolean) => void	Yes	—	Called when the drawer requests open/close (scrim click, ESC, close actions).
children	React.ReactNode	No	undefined	Drawer body content (forwarded to Sheet_side as `contentBody`).
contentFooter	React.ReactNode	No	undefined	Optional footer slot (forwarded to Sheet_side). Commonly used for a collapse toggle.
title	React.ReactNode	No	"Navigation drawer"	Drawer text (header area). If omitted, NavigationDrawer sets a default text.
side	"left" \| "right"	No	"left"	Which side the drawer slides from.
size	string	No	undefined	Drawer size preset forwarded to Sheet_side (e.g. "small", "medium", "large", "minimized"). When `isCollapsed=true`, size is forced to "minimized".
showScrim	boolean	No	true	Whether to render the overlay/scrim behind the drawer.
radius	string	No	"sm"	Corner radius preset forwarded to Sheet_side (commonly: "none", "sm").
style	string	No	"standard"	Surface style preset forwarded to Sheet_side.
offset	string	No	"none"	Offset preset forwarded to Sheet_side (useful when you have fixed app bars).
isCollapsed	boolean	No	false	When true, forces `size="minimized"` (ignores the incoming size).
onCollapsedChange	(v: boolean) => void	No	undefined	Declared in the public API, but the current NavigationDrawer implementation does not toggle collapse internally. Manage collapsed state in the parent.
className	string	No	undefined	Extra classes appended to the root.
customStyles	React.CSSProperties	No	undefined	Inline styles applied to the root (forwarded to Sheet_side).

Button_navigation Props

Button_navigation — Props
Prop	Type	Required	Default	Description
iconName	string	No	undefined	Icon name forwarded to your Icon/Badges implementation.
label	string	No	""	Display label. Truncated for UX: about 20 chars normally, and about 5 chars when `isCollapsed=true`.
showInfo	boolean	No	undefined	When true, renders the badge node.
baseNumber	number	No	0	Badge value (used when `showInfo` is true and `notQuantity` is not true).
baseLimit	number	No	0	Badge max. When `baseNumber > baseLimit`, renders `${baseLimit}+`.
notQuantity	boolean	No	undefined	When true, renders a dot badge instead of a number.
variant	"primary" \| "secondary" \| "tertiary" \| "success" \| "warning" \| "danger" \| "info"	No	undefined	Badge tone (forwarded to Badges).
isCollapsed	boolean	No	false	Collapsed/minimized mode. Uses a compact layout (badge + label). Also affects group behavior: groups are disabled when collapsed.
isSelected	boolean	No	false	Adds selected modifier class.
isDisabled	boolean	No	false	Disables interaction and adds disabled modifier class.
level	number	No	0	Indentation level. Applied as CSS variable `--_level` on the wrapper.
subItems	React.ReactNode	No	undefined	If provided (and `isCollapsed` is not true), the item becomes a collapsible group and renders this node as the sub-items container.
isExpanded	boolean	No	undefined	Controlled expanded state for groups. When provided, the group is controlled.
defaultExpanded	boolean	No	false	Uncontrolled initial expanded state for groups.
onExpandedChange	(next: boolean) => void	No	undefined	Called when a group toggles (only in controlled mode).
onClick	(e: React.MouseEvent<HTMLButtonElement>) => void	No	undefined	Called only when the item is NOT a group (no `subItems`).
onChange	(...args: any[]) => any	No	undefined	Declared for API consistency; currently not used by the component.