The Title Bar API allows you to populate a standardized title bar with button actions and navigation breadcrumbs.
<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';
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.
The title of the title bar. Can also be set via <code>document.title</code>.
The Title Bar API allows you to populate a standardized title bar with button actions and navigation breadcrumbs.
Title Bar with breadcrumb
<ui-title-bar title="Products">
<button variant="breadcrumb">Home</button>
</ui-title-bar>
<ui-title-bar title="Products">
<button variant="breadcrumb">Home</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>
<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
<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>
<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>