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
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>
);