Navigation - Vendure

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.

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

id

A unique identifier for the navigation section.

title

The display title for the navigation section.

icon

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

Example

import { PlusIcon } from 'lucide-react';

order

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

placement

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

</div> ## NavMenuItem <GenerationInfo sourceFile="packages/dashboard/src/lib/framework/nav-menu/nav-menu-extensions.ts" sourceLine="16" packageName="@vendure/dashboard" since="3.4.0" />

Defines an items in the navigation menu.

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

id

A unique ID for this nav menu item

title

The title that will appear in the nav menu

url

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

icon

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

order

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

requiresPermission

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

</div>