PageActionBar

A component for displaying the main actions for a page. This should be used inside the Page component.

You can add action bar items by including ActionBarItem components as direct children. For backwards compatibility, PageActionBarLeft and PageActionBarRight are also supported.

Mobile behavior: On mobile viewports, only the last inline ActionBarItem is shown (the primary action). Extension items and plain children are hidden to prevent overflow. The dropdown menu and entity info remain visible on all viewports.

Example

Tsx

<PageActionBar>    <ActionBarItem itemId="save-button" requiresPermission={['UpdateProduct']}>        <Button type="submit">Update</Button>    </ActionBarItem></PageActionBar>

Signature

function PageActionBar(props: Readonly<{    children: React.ReactNode;    /**     * @description     * Optional dropdown menu items to display in the action bar's context menu.     */    dropdownMenuItems?: InlineDropdownItem[];}>): void

Parameters

props

parameter

Readonly<{     children: React.ReactNode;     /**      * @description      * Optional dropdown menu items to display in the action bar's context menu.      */     dropdownMenuItems?: InlineDropdownItem[]; }>

@vendure/dashboard Sourcev3.5.2

Props for the ActionBarItem component.

Signature

interface ActionBarItemProps {    children: React.ReactNode;    itemId: string;    requiresPermission?: string | string[];}

children

propertyReact.ReactNode

The content of the action bar item, typically a Button component.

itemId

propertystring

A unique identifier for this action bar item. This ID is used by extensions to position their items relative to this one via position.itemId.

Note: Extensions should use this exact itemId value in their position.itemId field to target this item.

requiresPermission

propertystring | string[]

If provided, the logged-in user must have one or more of the specified permissions in order for the item to render.

@vendure/dashboard Sourcev3.5.2

A component for wrapping action bar items with a unique ID. This should be used inside the PageActionBarRight component. Each item is given an itemId which allows extensions to position their items relative to it using position.itemId.

Mobile behavior: On mobile viewports, only the last inline ActionBarItem is visible (treated as the primary action, e.g. Save/Update/Create). All other inline items and extension items are hidden. Place your primary action as the last ActionBarItem child of PageActionBar.

In developer mode, hovering over the item will show a popover with the pageId and itemId, making it easy to discover the correct IDs for extension positioning.

Example

Tsx

<PageActionBarRight>    <ActionBarItem itemId="save-button" requiresPermission={['UpdateProduct']}>        <Button type="submit">Save</Button>    </ActionBarItem></PageActionBarRight>

Signature

function ActionBarItem(props: Readonly<ActionBarItemProps>): void

Parameters

props

parameterReadonly<ActionBarItemProps>

@vendure/dashboard Sourcev3.3.0

The PageActionBarLeft component is not used and will be removed in a future version.

Signature

function PageActionBarLeft(props: Readonly<{ children: React.ReactNode }>): void

Parameters

props

parameterReadonly<{ children: React.ReactNode }>

@vendure/dashboard Sourcev3.3.0

The PageActionBarRight component is used to display the right content of the action bar.

Example

Tsx

// Old pattern (deprecated)<PageActionBar>    <PageActionBarRight>        <ActionBarItem itemId="save-button">            <Button type="submit">Update</Button>        </ActionBarItem>    </PageActionBarRight></PageActionBar>// New pattern (recommended)<PageActionBar>    <ActionBarItem itemId="save-button" requiresPermission={['UpdateProduct']}>        <Button type="submit">Update</Button>    </ActionBarItem></PageActionBar>

Signature

function PageActionBarRight(props: Readonly<{    /**     * @description     * ActionBarItem components that will be rendered in the action bar.     * Each item should have a unique itemId for extension targeting.     */    children?: React.ReactNode;    /**     * @description     * Optional dropdown menu items. These are now extracted and rendered by PageActionBar.     * @deprecated Pass dropdownMenuItems directly to PageActionBar instead.     */    dropdownMenuItems?: InlineDropdownItem[];}>): void

Parameters

props

parameter

Readonly<{     /**      * @description      * ActionBarItem components that will be rendered in the action bar.      * Each item should have a unique itemId for extension targeting.      */     children?: React.ReactNode;     /**      * @description      * Optional dropdown menu items. These are now extracted and rendered by PageActionBar.      * @deprecated Pass dropdownMenuItems directly to PageActionBar instead.      */     dropdownMenuItems?: InlineDropdownItem[]; }>

Was this chapter helpful?

Report Issue

Edited Mar 27, 2026·Edit this page