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

```jsx
import {TitleBar} from '@shopify/app-bridge-react';

export function MyApp() {
  return (
    <TitleBar title="Products">
      <button variant="primary">Primary action</button>
      <button>Secondary action</button>
    </TitleBar>
  );
}

```


## TitleBar component
The `TitleBar` component is available for use in your app. It configures the Title Bar 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
- [ui-title-bar](/docs/api/app-bridge-library/web-components/ui-title-bar)
- [Modal](/docs/api/app-bridge-library/react-components/modal-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

```jsx
import {TitleBar} from '@shopify/app-bridge-react';

export function MyApp() {
  return (
    &lt;TitleBar title="Products"&gt;
      &lt;button variant="breadcrumb"&gt;Home&lt;/button&gt;
    &lt;/TitleBar&gt;
  );
}

```


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

```jsx
import {TitleBar} from '@shopify/app-bridge-react';

export function MyApp() {
  return (
    &lt;TitleBar title="Products"&gt;
      &lt;button onClick={() =&gt; console.log('Secondary Action')}&gt;
        Secondary Action
      &lt;/button&gt;
      &lt;button variant="primary" onClick={() =&gt; console.log('Primary Action')}&gt;
        Primary Action
      &lt;/button&gt;
    &lt;/TitleBar&gt;
  );
}

```


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

```jsx
import {TitleBar} from '@shopify/app-bridge-react';

export function MyApp() {
  return (
    &lt;TitleBar title="Products"&gt;
      &lt;section label="More actions"&gt;
        &lt;button onClick={() =&gt; console.log('Secondary Action 1')}&gt;
          Secondary Action 1
        &lt;/button&gt;
        &lt;button onClick={() =&gt; console.log('Secondary Action 2')}&gt;
          Secondary Action 2
        &lt;/button&gt;
      &lt;/section&gt;
    &lt;/TitleBar&gt;
  );
}

```