Skip to main content

Navigation

DashboardRouteDefinition​

@vendure/dashboardnavigation.ts
v3.4.0

Defines a custom route for the dashboard with optional navigation menu integration.

Signature
interface DashboardRouteDefinition {
    component: (route: AnyRoute) => React.ReactNode;
    path: string;
    navMenuItem?: Partial<NavMenuItem> & { sectionId: string };
    loader?: RouteOptions['loader'];
}

component​

property
(route: AnyRoute) => React.ReactNode

The React component that will be rendered for this route.

path​

property
string

The URL path for this route, e.g. '/my-custom-page'.

property
Partial<NavMenuItem> & { sectionId: string }

Optional navigation menu item configuration to add this route to the nav menu on the left side of the dashboard.

loader​

property
RouteOptions['loader']

Optional loader function to fetch data before the route renders. The value is a Tanstack Router loader function

DashboardNavSectionDefinition​

@vendure/dashboardnavigation.ts
v3.4.0

Defines a custom navigation section in the dashboard sidebar.

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.