Skip to main content

Navigation

DashboardNavSectionDefinition​

@vendure/dashboardnavigation.ts
v3.4.0

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.

@vendure/dashboardnav-menu-extensions.ts
v3.4.0

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.