Title
Requires
@shopify/app-bridge-react@v4 and the app-bridge.js script tagThe Title Bar API allows you to populate a standardized title bar with button actions and navigation breadcrumbs.
Anchor to titlebar componentTitleBar component
The component is available for use in your app. It configures the Title Bar 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.
Was this section helpful?
TitleBar
import {TitleBar} from '@shopify/app-bridge-react';
export function MyApp() {
return (
<TitleBar title="Products">
<button variant="primary">Primary action</button>
<button>Secondary action</button>
</TitleBar>
);
}
Preview
Anchor to examplesExamples
Title Bar with different options
Was this section helpful?
Title Bar with breadcrumb
import {TitleBar} from '@shopify/app-bridge-react';
export function MyApp() {
return (
<TitleBar title="Products">
<button variant="breadcrumb">Home</button>
</TitleBar>
);
}
