# 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
The children of the title bar.
### title
The title of the title bar. Can also be set via <code>document.title</code>.
### UITitleBarChildren

### a

### button

### section

### BaseElementAttributes

### children

### class

### href

### id

### name

### onclick

### rel

### target

## 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
&lt;ui-title-bar title="Products"&gt;
  &lt;button variant="breadcrumb"&gt;Home&lt;/button&gt;
&lt;/ui-title-bar&gt;

```


### 
Title Bar with buttons
### Title Bar with buttons

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

```


### 
Title Bar with grouped secondary buttons
### Title Bar with grouped secondary buttons

```html
&lt;ui-title-bar&gt;
  &lt;section label="More actions"&gt;
    &lt;button onclick="console.log('Secondary Action 1')"&gt;
      Secondary Action 1
    &lt;/button&gt;
    &lt;button onclick="console.log('Secondary Action 2')"&gt;
      Secondary Action 2
    &lt;/button&gt;
  &lt;/section&gt;
&lt;/ui-title-bar&gt;

```