Navigation Controls
Payload's navigation controls support the Admin Panel's menu, collapsible groups, and step navigation. These components are intended for Custom Components rendered inside the Admin Panel.
Import
Menu state
Hamburger renders the visual open or closed state. NavToggler provides the Admin-aware button that opens and closes the navigation and saves the desktop preference.
Navigation groups
NavGroup renders a labeled, collapsible group in the Admin navigation. Its open state is persisted through Payload's preferences provider.
label is required and is used both as the visible group heading and as the key the open state is stored under in preferences. Pass isOpen to choose the group's initial state.
Step navigation
Use SetStepNav or useStepNav to populate the breadcrumb trail in the Admin header from a Custom View. See Step Navigation for complete examples and API guidance.
Common props
These are the props most commonly used. See the exported types in @payloadcms/ui for the complete list.
NavGroup
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Labels the group and keys its saved state. |
| | — | Renders the navigation items in the group. |
| | — | Sets the group's initial expanded state. |
NavToggler
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Renders the button contents. |
| | — | Adds a class to the toggle button. |
| | — | Sets the button ID. |
| | | Sets the button's keyboard navigation order. |
* An asterisk denotes that a prop is required.
Provider requirements
NavToggler and NavGroup depend on the navigation, preferences, translation, and window information supplied by the Admin Panel. Use them within Admin Panel Custom Components rather than as standalone website navigation primitives.
Was this page helpful?