---
title: "PageActionBar"
generated: true
---
<GenerationInfo sourceFile="packages/dashboard/src/lib/framework/layout-engine/page-layout.tsx" sourceLine="351" packageName="@vendure/dashboard" since="3.3.0" />

*
A component for displaying the main actions for a page. This should be used inside the <DocsLink href="/reference/dashboard/page-layout/page#page">Page</DocsLink> component.
It should be used in conjunction with the <DocsLink href="/reference/dashboard/page-layout/page-action-bar#pageactionbarleft">PageActionBarLeft</DocsLink> and <DocsLink href="/reference/dashboard/page-layout/page-action-bar#pageactionbarright">PageActionBarRight</DocsLink> components
as direct children.

```ts title="Signature"
function PageActionBar(props: Readonly<{ children: React.ReactNode }>): void
```
Parameters

### props

<MemberInfo kind="parameter" type={`Readonly<{ children: React.ReactNode }>`} />

<GenerationInfo sourceFile="packages/dashboard/src/lib/framework/layout-engine/page-layout.tsx" sourceLine="373" packageName="@vendure/dashboard" since="3.3.0" />

The PageActionBarLeft component should be used to display the left content of the action bar.

```ts title="Signature"
function PageActionBarLeft(props: Readonly<{ children: React.ReactNode }>): void
```
Parameters

### props

<MemberInfo kind="parameter" type={`Readonly<{ children: React.ReactNode }>`} />

<GenerationInfo sourceFile="packages/dashboard/src/lib/framework/layout-engine/page-layout.tsx" sourceLine="466" packageName="@vendure/dashboard" since="3.3.0" />

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

```ts title="Signature"
function PageActionBarRight(props: Readonly<{
    children: React.ReactNode;
    dropdownMenuItems?: InlineDropdownItem[];
}>): void
```
Parameters

### props

<MemberInfo kind="parameter" type={`Readonly<{     children: React.ReactNode;     dropdownMenuItems?: InlineDropdownItem[]; }>`} />

