routesstringA unique identifier for the navigation section.
stringThe display title for the navigation section.
LucideIconOptional icon to display next to the section title. The icons should
be imported from 'lucide-react'.
Example
numberOptional order number to control the position of this section in the sidebar.
'top' | 'bottom'Optional placement to control the position of this section in the sidebar.
A predicate evaluated on every nav render to decide whether this section is shown. When it returns false the section and all of its items are hidden. A section is also hidden once every item inside it is, since expanding it would show nothing.
Presentation only, never authorization.
Defines an items in the navigation menu.
stringA unique ID for this nav menu item
stringThe title that will appear in the nav menu
stringThe url of the route which this nav item links to.
LucideIconAn optional icon component to represent the item,
which should be imported from lucide-react.
numberThe 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.
NavMenuSectionPlacementstring | string[]This can be used to restrict the menu item to the given permission or permissions. The user needs ANY of the listed permissions on the active channel, not all of them.
ANDed with isVisible when both are set: an item appears only if it
passes both checks.
NavigationShortcutOptional second key for the global G navigation chord.
A predicate evaluated on every nav render to decide whether this item is shown.
It is ANDed with requiresPermission: both must pass for the item to appear.
Must be pure, synchronous and cheap. The framework makes no promise about how often it is called.
This controls presentation only and is never an authorization mechanism.
Names the nav entries a visibility helper acts on. sections holds the ids of the
top-level entries of NavMenuConfig.sections, items the ids of the entries nested
inside them.
The two are named separately because a section and one of its items may carry the same id, as the built-in Customers section and Customers item do.
Returns a new config in which the entries named by target have predicate ANDed
onto their existing isVisible.
Use this rather than spreading isVisible yourself: a plain spread silently
discards a predicate that another plugin already set on the same entry.
This controls presentation only and is never an authorization mechanism.
Example
Parameters
NavMenuConfigNavMenuTargetPredicateReturns a new config in which every entry not named by target is hidden. Naming a
section keeps all of its items, rather than hiding the ones not named individually.
Naming an item keeps the section it sits in.
Pass when to apply the whitelist only to the administrators it matches. Without it,
every entry not named is hidden from everybody.
This controls presentation only and is never an authorization mechanism.
Example
Parameters
NavMenuConfigNavMenuTargetPredicateThe ids of the navigation entries which sit directly in NavMenuConfig.sections.
These are the ids to pass as the sections of a NavMenuTarget, or to match on
when writing a navSections function.
insights is a link rather than a section, but it occupies a top-level slot in
sections and is targeted the same way.
Insights (insights), Catalog (catalog), Sales (sales),
Customers (customers), Marketing (marketing), System (system),
Settings (settings).
The ids of the navigation items nested inside the built-in sections. These are the ids
to pass as the items of a NavMenuTarget.
A section and an item may share an id, as the Customers section and the Customers item do. This is why a NavMenuTarget names the two separately.
Under catalog: Products (products), ProductVariants (product-variants),
OptionGroups (option-groups), Facets (facets), Collections (collections),
Assets (assets). Under sales: Orders (orders). Under customers:
Customers (customers), CustomerGroups (customer-groups). Under marketing:
Promotions (promotions). Under system: JobQueue (job-queue),
ScheduledTasks (scheduled-tasks), SettingsStore (settings-store),
ApiKeys (api-keys). Under settings: Sellers (sellers), Channels (channels),
StockLocations (stock-locations), Administrators (administrators),
Roles (roles), ShippingMethods (shipping-methods),
PaymentMethods (payment-methods), TaxCategories (tax-categories),
TaxRates (tax-rates), Countries (countries), Zones (zones),
GlobalSettings (global-settings).
The id of a built-in top-level navigation entry.
The id of a built-in navigation item.
A role held by the active administrator.
A channel the active administrator can access.
Augment this interface in your own project to get typed Administrator custom fields
on DashboardUserContext.administrator.customFields.
Example
The active administrator.
stringstringstringstring{ id: string; identifier: string }AdministratorCustomFields & Record<string, unknown>Describes the logged-in dashboard user. Passed to isVisible predicates so they
can decide what this user should see.
This controls presentation only. It is never an authorization mechanism: a user who can call an operation on the Admin API can still call it regardless of what the dashboard renders.
DashboardAdministrator | undefinedDashboardUserRole[]Example
DashboardUserChannel[]DashboardUserChannel | undefined(permissions: string[]) => booleanbooleanThe input shape for buildDashboardUserContext.
| { id: string; firstName: string; lastName: string; emailAddress: string; user: { id: string; identifier: string; roles: readonly DashboardUserRole[] }; } | undefinedreadonly DashboardUserChannel[] | undefinedDashboardUserChannel | undefinedRecord<string, unknown> | undefined(permissions: string[]) => booleanAssembles a DashboardUserContext. Pure, so it can be unit tested and reused
outside React (for example in a TanStack Router beforeLoad).
Parameters
BuildDashboardUserContextInputArchitecture reviews, custom plugin work, migrations, ongoing support. Get a hand from the team that builds Vendure.
Talk to the team