TitleBar
Setup
Import the Provider
and TitleBar
component from @shopify/app-bridge-react
. Only one Provider
is needed for your application.
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider, TitleBar} from '@shopify/app-bridge-react';
function MyApp() {
const config = {apiKey: '12345', shopOrigin: shopOrigin};
const primaryAction = {content: 'Foo', url: '/foo'};
const secondaryActions = [{content: 'Bar', url: '/bar'}];
const actionGroups = [{title: 'Baz', actions: [{content: 'Baz', url: '/baz'}]}];
return (
<Provider config={config}>
<TitleBar
title="Hello world!"
primaryAction={primaryAction}
secondaryActions={secondaryActions}
actionGroups={actionGroups}
/>
</Provider>
);
}
const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.render(<MyApp />, root);
Props
Name | Type | Description | Required |
---|---|---|---|
title | string |
TitleBar title | Yes |
breadcrumbs | Breadcrumb[] |
An array of breadcrumbs | |
primaryAction | ActionProps |
Primary TitleBar action | |
secondaryActions | ActionProps[] |
An array of secondary TitleBar actions | |
actionGroups | ActionGroupProps[] |
An array of TitleBar groups of secondary actions |
Breadcrumb
Name | Type | Description | Required |
---|---|---|---|
content | string |
Content the action displays | |
url | string |
A destination to link to | |
target | "ADMIN_PATH" , "REMOTE" , "APP" |
Where to display the target link | |
onAction | () => void |
Callback when an action takes place |
ActionProps
Name | Type | Description | Required |
---|---|---|---|
content | string |
Content the action displays | |
destructive | boolean |
Should the action be styled as destructive | |
disabled | boolean |
Should the action be disabled | |
external | boolean |
Forces url to open in a new tab | |
target | "ADMIN_PATH" , "REMOTE" , "APP" |
Where to display the target link | |
url | string |
A destination to link to | |
onAction | () => void |
Callback when an action takes place |
ActionGroupProps
Name | Type | Description | Required |
---|---|---|---|
title | string |
Action group title | Yes |
actions | ActionProps[] |
List of actions | Yes |
Using <TitleBar>
with the Polaris <Page>
component
When used with embedded app functionality, the Polaris <Page>
component still renders important layout elements. App Bridge React’s <TitleBar>
does not. Because of this, the recommended migration path is to keep the <Page>
element, but pass its props to <TitleBar>
instead.
The following examples show the migration path, starting with the use of deprecated Polaris embedded app functionality:
import { AppProvider, Page } from "@shopify/polaris";
render(
<AppProvider apiKey="api_key" shopOrigin="example.myshopify.com">
<Page
title="My App using legacy code"
breadcrumbs={[{ content: "Breadcrumb" }]}
primaryAction={primaryAction}
secondaryActions={secondaryActions}
actionGroups={actionGroups}
>
{content}
</Page>
</AppProvider>
);
The recommended migration path uses App Bridge React along with the Polaris <Page>
component:
import { AppProvider, Page } from "@shopify/polaris";
import {
Provider as AppBridgeProvider,
TitleBar
} from "@shopify/app-bridge-react";
render(
<AppProvider>
<AppBridgeProvider
config={{ apiKey: "api_key", shopOrigin: "example.myshopify.com" }}
>
<Page>
<TitleBar
title="My App using up-to-date code"
breadcrumbs={[{ content: "Breadcrumb" }]}
primaryAction={primaryAction}
secondaryActions={secondaryActions}
actionGroups={actionGroups}
/>
{content}
</Page>
</AppBridgeProvider>
</AppProvider>
);