ui-title-bar

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

Anchor to ui-title-bar elementui-title-bar element

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

Anchor to children children: The children of the title bar.
Anchor to title title string: The title of the title bar. Can also be set via document.title.

_UITitleBarAttributes

children
The children of the title bar.
```
UITitleBarChildren
```
title
The title of the title bar. Can also be set via <code>document.title</code>.
```
string
```

interface _UITitleBarAttributes {
  /**
   * The title of the title bar. Can also be set via <code>document.title</code>.
   */
  title?: string;
  /**
   * The children of the title bar.
   */
  children?: UITitleBarChildren;
}

UITitleBarChildren

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

button

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

section

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

interface UITitleBarChildren {
  a?: BaseElementAttributes & {variant?: 'breadcrumb' | 'primary'};
  button?: BaseElementAttributes & {
    variant?: 'breadcrumb' | 'primary';
    tone?: 'critical' | 'default';
  };
  section?: {
    label?: string;
    children?: {
      a?: BaseElementAttributes;
      button?: BaseElementAttributes;
    };
  };
}

BaseElementAttributes

children
```
string
```
class
```
string
```
href
```
string
```
id
```
string
```
name
```
string
```
onclick
```
string
```
rel
```
string
```
target
```
string
```

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

Was this section helpful?

TitleBar

<ui-title-bar title="Products">

<button onclick="console.log('Secondary action')">Secondary action</button>

Primary action

</button>

</ui-title-bar>

examples

TitleBar

Custom element

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

Web API

document.title = 'Products';

Preview

Anchor to examplesExamples

Title Bar with different options

Anchor to example-title-bar-with-buttonsTitle Bar with buttons

Title Bar with buttons

Anchor to example-title-bar-with-grouped-secondary-buttonsTitle Bar with grouped secondary buttons

Title Bar with grouped secondary buttons

Was this section helpful?

Title Bar with breadcrumb

<ui-title-bar title="Products">

</ui-title-bar>

examples

Title Bar with breadcrumb

description

Title Bar with breadcrumb

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

Title Bar with buttons

description

Title Bar with buttons

<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

description

Title Bar with grouped secondary buttons

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

Anchor to relatedRelated

React ComponentsTitleBar Component