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

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

## Preview

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

## Examples

Title Bar with different options

Title Bar with breadcrumb

Title Bar with breadcrumb

Title Bar with buttons

Title Bar with buttons

Title Bar with grouped secondary buttons

Title Bar with grouped secondary buttons

### Examples

* #### 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

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar)

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

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/app-bridge-library/react-components/modal-component)

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