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

## Preview

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

## Examples

Title Bar with different options

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