Skip to main content

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.

The children of the title bar.

string

The title of the title bar. Can also be set via document.title.

Was this section helpful?

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>

Preview

Title Bar with different options

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">
<button variant="breadcrumb">Home</button>
</ui-title-bar>