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

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


### button

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


### section

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


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

```