---
title: ui-title-bar
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/web-components/ui-title-bar'
  md: >-
    https://shopify.dev/docs/api/app-bridge-library/web-components/ui-title-bar.md
---

# ui-title-bar

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

## ui-title-bar element

The `ui-title-bar` element is available for use in your app. It configures the TitleBar 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

  ##### Custom element

  ```html
  <ui-title-bar title="Products">
    <button onclick="console.log('Secondary action')">Secondary action</button>
    <button variant="primary" onclick="console.log('Primary action')">
      Primary action
    </button>
  </ui-title-bar>
  ```

  ##### Web API

  ```js
  document.title = 'Products';
  ```

## Preview

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

## Examples

Title Bar with different options

### Examples

* #### Title Bar with breadcrumb

  ##### Description

  Title Bar with breadcrumb

  ##### Default

  ```html
  <ui-title-bar title="Products">
    <button variant="breadcrumb">Home</button>
  </ui-title-bar>
  ```

* #### Title Bar with buttons

  ##### Description

  Title Bar with buttons

  ##### Default

  ```html
  <ui-title-bar title="Products">
    <button variant="secondary" onclick="console.log('Secondary Action')">
      Secondary Action
    </button>
    <button variant="primary" onclick="console.log('Primary Action')">
      Primary Action
    </button>
  </ui-title-bar>
  ```

* #### Title Bar with grouped secondary buttons

  ##### Description

  Title Bar with grouped secondary buttons

  ##### Default

  ```html
  <ui-title-bar>
    <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>
  </ui-title-bar>
  ```

## Related

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