Skip to main content

Navigation

DashboardNavSectionDefinition

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;
}

id

property
string

A unique identifier for the navigation section.

title

property
string

The display title for the navigation section.

icon

property
LucideIcon

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

Example

import { PlusIcon } from 'lucide-react';

order

property
number

Optional order number 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

property
string

A unique ID for this nav menu item

title

property
string

The title that will appear in the nav menu

url

property
string

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

icon

property
LucideIcon

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

order

property
number

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

property
NavMenuSectionPlacement

requiresPermission

property
string | string[]

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