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

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

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

[![](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/titlebar-component)

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