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

Sign up for a Partner account to get started.

Sign up