# ui-title-bar

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

```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 <code>document.title</code>.

### 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](/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
### Title Bar with breadcrumb

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

```



### 
Title Bar with buttons
### 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
### 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>

```