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 childrenchildrenUITitleBarChildren
The children of the title bar.
- Anchor to titletitlestring
The title of the title bar. Can also be set via
document.title.
UITitleBarChildren
- a
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>
<button variant="primary" onclick="console.log('Primary action')">
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
Was this section helpful?
Title Bar with breadcrumb
<ui-title-bar title="Products">
<button variant="breadcrumb">Home</button>
</ui-title-bar>
Examples
Title Bar with breadcrumb
Description
Title Bar with breadcrumb
Default
<ui-title-bar title="Products"> <button variant="breadcrumb">Home</button> </ui-title-bar>Title Bar with buttons
Description
Title Bar with buttons
Default
<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
Default
<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>
