---
title: TitleBar Component
description: >-
  The Title Bar API allows you to populate a standardized title bar with button
  actions and navigation breadcrumbs.
api_name: app-bridge-library
source_url:
  html: >-
    https://shopify.dev/docs/api/app-bridge-library/react-components/titlebar-component
  md: >-
    https://shopify.dev/docs/api/app-bridge-library/react-components/titlebar-component.md
---

# Title​Bar Component

Requires [`@shopify/app-bridge-react@v4`](https://www.npmjs.com/package/@shopify/app-bridge-react) and the [`app-bridge.js` script tag](https://shopify.dev/docs/api/app-bridge-library#getting-started)

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

## TitleBar component

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

* children

  UITitleBarChildren

  The children of the title bar.

* title

  string

  The title of the title bar. Can also be set via `document.title`.

### UITitleBarChildren

* a

  ```ts
  BaseElementAttributes & { variant?: "breadcrumb" | "primary"; }
  ```

* button

  ```ts
  BaseElementAttributes & { variant?: "breadcrumb" | "primary"; tone?: "critical" | "default"; }
  ```

* section

  ```ts
  { label?: string; children?: { a?: BaseElementAttributes; button?: BaseElementAttributes; }; }
  ```

```ts
interface UITitleBarChildren {
  a?: BaseElementAttributes & {variant?: 'breadcrumb' | 'primary'};
  button?: BaseElementAttributes & {
    variant?: 'breadcrumb' | 'primary';
    tone?: 'critical' | 'default';
  };
  section?: {
    label?: string;
    children?: {
      a?: BaseElementAttributes;
      button?: BaseElementAttributes;
    };
  };
}
```

### BaseElementAttributes

* children

  ```ts
  string
  ```

* class

  ```ts
  string
  ```

* href

  ```ts
  string
  ```

* id

  ```ts
  string
  ```

* name

  ```ts
  string
  ```

* onclick

  ```ts
  string
  ```

* rel

  ```ts
  string
  ```

* target

  ```ts
  string
  ```

```ts
interface BaseElementAttributes {
  id?: string;
  name?: string;
  class?: string;
  href?: string;
  rel?: string;
  target?: string;
  onclick?: string;
  children?: string;
}
```

Examples

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/app-bridge-library/title-bar.png)

### Examples

* #### TitleBar

  ##### Default

  ```jsx
  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>
    );
  }
  ```

* #### Title Bar with breadcrumb

  ##### Description

  Title Bar with breadcrumb

  ##### Default

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

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

* #### Title Bar with buttons

  ##### Description

  Title Bar with buttons

  ##### Default

  ```jsx
  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

  ##### Description

  Title Bar with grouped secondary buttons

  ##### Default

  ```jsx
  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>
    );
  }
  ```

## Related

[Web Components - ui-title-bar](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar)

[React Components - Modal](https://shopify.dev/docs/api/app-bridge-library/react-components/modal-component)