TitleBar Component

The Title Bar API allows you to populate a standardized title bar with button actions and navigation breadcrumbs.

TitleBar

import {TitleBar} from '@shopify/app-bridge-react';

export function MyApp() {
  return (
    <TitleBar title="Products">
      <button variant="primary">Primary action</button>
      <button>Secondary action</button>
    </TitleBar>
  );
}

TitleBar component

The `TitleBar` component is available for use in your app. It configures the Title Bar in the Shopify admin.

_UITitleBarAttributes

children

The children of the title bar.

title

The title of the title bar. Can also be set via <code>document.title</code>.

UITitleBarChildren

a

button

section

BaseElementAttributes

children

class

href

id

name

onclick

rel

target

Examples

The Title Bar API allows you to populate a standardized title bar with button actions and navigation breadcrumbs.

Title Bar with breadcrumb

import {TitleBar} from '@shopify/app-bridge-react';

export function MyApp() {
  return (
    <TitleBar title="Products">
      <button variant="breadcrumb">Home</button>
    </TitleBar>
  );
}

Title Bar with breadcrumb

import {TitleBar} from '@shopify/app-bridge-react';

export function MyApp() {
  return (
    <TitleBar title="Products">
      <button variant="breadcrumb">Home</button>
    </TitleBar>
  );
}

Title Bar with buttons

import {TitleBar} from '@shopify/app-bridge-react';

export function MyApp() {
  return (
    <TitleBar title="Products">
      <button onClick={() => console.log('Secondary Action')}>
        Secondary Action
      </button>
      <button variant="primary" onClick={() => console.log('Primary Action')}>
        Primary Action
      </button>
    </TitleBar>
  );
}

Title Bar with buttons

import {TitleBar} from '@shopify/app-bridge-react';

export function MyApp() {
  return (
    <TitleBar title="Products">
      <button onClick={() => console.log('Secondary Action')}>
        Secondary Action
      </button>
      <button variant="primary" onClick={() => console.log('Primary Action')}>
        Primary Action
      </button>
    </TitleBar>
  );
}

Title Bar with grouped secondary buttons

import {TitleBar} from '@shopify/app-bridge-react';

export function MyApp() {
  return (
    <TitleBar title="Products">
      <section label="More actions">
        <button onClick={() => console.log('Secondary Action 1')}>
          Secondary Action 1
        </button>
        <button onClick={() => console.log('Secondary Action 2')}>
          Secondary Action 2
        </button>
      </section>
    </TitleBar>
  );
}

Title Bar with grouped secondary buttons

import {TitleBar} from '@shopify/app-bridge-react';

export function MyApp() {
  return (
    <TitleBar title="Products">
      <section label="More actions">
        <button onClick={() => console.log('Secondary Action 1')}>
          Secondary Action 1
        </button>
        <button onClick={() => console.log('Secondary Action 2')}>
          Secondary Action 2
        </button>
      </section>
    </TitleBar>
  );
}

TitleBar Component

TitleBar