DefineDashboardExtension

defineDashboardExtension

The main entry point for extensions to the React-based dashboard. Every dashboard extension must contain a call to this function, usually in the entry point file that is referenced by the dashboard property of the plugin decorator.

Every type of customisation of the dashboard can be defined here, including:

Navigation (nav sections and routes)
Layout (action bar items and page blocks)
Widgets
Form input components for custom fields, configurable operation arguments, and native detail-page fields
Data tables
Detail forms
Login
Custom history entries
Toolbar items

Example

Tsx

defineDashboardExtension({    navSections: [],    routes: [],    pageBlocks: [],    actionBarItems: [],    alerts: [],    widgets: [],    customFormComponents: {},    dataTables: [],    detailForms: [],    login: {},    historyEntries: [],    toolbarItems: [],});

Signature

function defineDashboardExtension(extension: DashboardExtension): void

Parameters

extension

parameterDashboardExtension

DashboardExtension

@vendure/dashboard Sourcev3.3.0

This is the main interface for defining all extensions to the dashboard.

Every type of customisation of the dashboard can be defined here, including:

Navigation (nav sections and routes)
Layout (action bar items and page blocks)
Widgets for the Insights page
Form input components for custom fields, configurable operation arguments, and native detail-page fields
Data tables
Detail forms
Login page customisation
Alerts
History entries
Toolbar items

Signature

interface DashboardExtension {    routes?: DashboardRouteDefinition[];    navSections?: DashboardNavSectionDefinition[] | ((config: NavMenuConfig) => NavMenuConfig);    pageBlocks?: DashboardPageBlockDefinition[];    actionBarItems?: DashboardActionBarItem[];    alerts?: DashboardAlertDefinition[];    widgets?: DashboardWidgetDefinition[];    customFormComponents?: DashboardCustomFormComponents;    dataTables?: DashboardDataTableExtensionDefinition[];    detailForms?: DashboardDetailFormExtensionDefinition[];    login?: DashboardLoginExtensions;    historyEntries?: DashboardHistoryEntryComponent[];    toolbarItems?: DashboardToolbarItemDefinition[];}

routes

propertyDashboardRouteDefinition[]

Allows you to define custom routes such as list or detail views.

navSections

propertyDashboardNavSectionDefinition[] | ((config: NavMenuConfig) => NavMenuConfig)

Allows you to define custom nav sections for the dashboard.

Can be provided as either:

An array of DashboardNavSectionDefinition objects to declaratively add new sections
A function that receives the current NavMenuConfig and returns a new one, allowing full control over the nav menu (move, remove, reorder items between sections)

When using the function form, the function is guaranteed to run after all array-form registrations have completed, so it always sees the fully-populated nav config.

Example

// Array form (existing)navSections: [{ id: 'my-section', title: 'My Section' }]// Function form (new)navSections: (config) => ({    sections: config.sections.map(s =>        s.id === 'settings' && 'items' in s            ? { ...s, items: s.items?.filter(i => i.id !== 'administrators') }            : s    ),})

Note: modifier functions should return a new config object rather than mutating the input, to ensure predictable behavior when multiple modifiers are composed. The function form was introduced in version 3.6.0.

pageBlocks

propertyDashboardPageBlockDefinition[]

Allows you to define custom page blocks for any page in the dashboard.

actionBarItems

propertyDashboardActionBarItem[]

Allows you to define custom action bar items for any page in the dashboard.

alerts

propertyDashboardAlertDefinition[]

Allows you to define custom alerts that can be displayed in the dashboard.

widgets

propertyDashboardWidgetDefinition[]

Allows you to define custom widgets for the Insights page.

customFormComponents

propertyDashboardCustomFormComponents

Registers custom input component IDs for custom fields and configurable operation arguments.

dataTables

propertyDashboardDataTableExtensionDefinition[]

Allows you to customize aspects of existing data tables in the dashboard.

detailForms

propertyDashboardDetailFormExtensionDefinition[]

Allows you to customize detail pages, including native field input overrides.

propertyDashboardLoginExtensions

Allows you to customize the login page with custom components.

historyEntries

propertyDashboardHistoryEntryComponent[]

Allows a custom component to be used to render a history entry item in the Order or Customer history lists.

toolbarItems

propertyDashboardToolbarItemDefinition[]v3.5.3

Allows you to define custom toolbar items in the app shell header bar. Toolbar items appear alongside the breadcrumbs, Dev Mode indicator, and alerts icon.

Was this chapter helpful?

Report Issue

Edited Jun 24, 2026·Edit this page