Toolbar items appear in the global header bar, next to the breadcrumbs, Dev Mode indicator, and alerts icon. Use them for compact actions that should be available across the Dashboard, such as quick search, a channel-aware shortcut, or a link to a custom help panel.
For page-specific actions, use action bar items instead.
Toolbar components receive no props. Use Dashboard hooks such as useAuth(), useChannel(), usePermissions(), or useNavigate() when the item needs application state.
Toolbar items can be positioned relative to built-in toolbar items or to items added by other extensions:
The built-in toolbar item IDs are:
| ID | Description |
|---|---|
dev-mode-indicator | The Dev Mode badge, visible only when Dev Mode is enabled |
alerts | The alerts icon |
order can be:
| Order | Behavior |
|---|---|
before | Place your item before the target item |
after | Place your item after the target item |
replace | Replace the target item with your item |
Items without a position are placed before all built-in toolbar items.
Use requiresPermission when the toolbar item should only be available to administrators with specific permissions:
Return null from the component when visibility depends on runtime state:
Enable Dev Mode, then hover the toolbar item you want to target. The popover shows the itemId you can use in position.itemId.
The Extension Targets reference lists the built-in toolbar IDs.
aria-label.before or after over replace unless you intentionally want to take ownership of a built-in toolbar action.@vendure/dashboard.Architecture reviews, custom plugin work, migrations, ongoing support. Get a hand from the team that builds Vendure.
Talk to the team