ui-title-bar

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

TitleBar

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

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

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

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

Title Bar with breadcrumb

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

Title Bar with buttons

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

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>

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>