# ui-title-bar

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

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

```

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

```

## ui-title-bar element

The `ui-title-bar` element is available for use in your app. It configures the TitleBar in the Shopify admin.

### _UITitleBarAttributes

### children

value: `UITitleBarChildren`

  - UITitleBarChildren: interface UITitleBarChildren {
  a?: BaseElementAttributes & {variant?: 'breadcrumb' | 'primary'};
  button?: BaseElementAttributes & {
    variant?: 'breadcrumb' | 'primary';
    tone?: 'critical' | 'default';
  };
  section?: {
    label?: string;
    children?: {
      a?: BaseElementAttributes;
      button?: BaseElementAttributes;
    };
  };
}
The children of the title bar.

### title

value: `string`

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

### UITitleBarChildren

### a

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

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

### button

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

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

### section

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

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

### BaseElementAttributes

### children

value: `string`


### class

value: `string`


### href

value: `string`


### id

value: `string`


### name

value: `string`


### onclick

value: `string`


### rel

value: `string`


### target

value: `string`


## Related

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

## Examples

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


Title Bar with breadcrumb

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

```


Title Bar with buttons

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

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

```

## Examples

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


Title Bar with breadcrumb

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

```


Title Bar with buttons

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

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

```