Skip to main content

Navigation

Defines a custom navigation section in the dashboard sidebar.

Individual items can then be added to the section by defining routes in the routes property of your Dashboard extension.

Signature
interface DashboardNavSectionDefinition {    id: string;    title: string;    icon?: LucideIcon;    order?: number;    placement?: 'top' | 'bottom';}

id

propertystring

A unique identifier for the navigation section.

title

propertystring

The display title for the navigation section.

icon

propertyLucideIcon

Optional icon to display next to the section title. The icons should be imported from 'lucide-react'.

Example

Ts
import { PlusIcon } from 'lucide-react';

order

propertynumber

Optional order number to control the position of this section in the sidebar.

placement

property'top' | 'bottom'

Optional placement to control the position of this section in the sidebar.

Defines an items in the navigation menu.

Signature
interface NavMenuItem {    id: string;    title: string;    url: string;    icon?: LucideIcon;    order?: number;    placement?: NavMenuSectionPlacement;    requiresPermission?: string | string[];}

id

propertystring

A unique ID for this nav menu item

title

propertystring

The title that will appear in the nav menu

url

propertystring

The url of the route which this nav item links to.

icon

propertyLucideIcon

An optional icon component to represent the item, which should be imported from lucide-react.

order

propertynumber

The order is an number which allows you to control the relative position in relation to other items in the menu. A higher number appears further down the list.

placement

propertyNavMenuSectionPlacement

requiresPermission

propertystring | string[]

This can be used to restrict the menu item to the given permission or permissions.

Was this chapter helpful?
Report Issue
Edited Feb 2, 2026·Edit this page