# TitleBar Component The Title Bar API allows you to populate a standardized title bar with button actions and navigation breadcrumbs. ### TitleBar ```jsx 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> ); } ``` ## TitleBar component The `TitleBar` component is available for use in your app. It configures the Title Bar 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 - [ui-title-bar](/docs/api/app-bridge-library/web-components/ui-title-bar) - [Modal](/docs/api/app-bridge-library/react-components/modal-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 ```jsx import {TitleBar} from '@shopify/app-bridge-react'; export function MyApp() { return ( <TitleBar title="Products"> <button variant="breadcrumb">Home</button> </TitleBar> ); } ``` ### Title Bar with buttons ### Title Bar with buttons ```jsx import {TitleBar} from '@shopify/app-bridge-react'; export function MyApp() { return ( <TitleBar title="Products"> <button onClick={() => console.log('Secondary Action')}> Secondary Action </button> <button variant="primary" onClick={() => console.log('Primary Action')}> Primary Action </button> </TitleBar> ); } ``` ### Title Bar with grouped secondary buttons ### Title Bar with grouped secondary buttons ```jsx import {TitleBar} from '@shopify/app-bridge-react'; export function MyApp() { return ( <TitleBar title="Products"> <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> </TitleBar> ); } ```