# ui-title-bar The Title Bar API allows you to populate a standardized title bar with button actions and navigation breadcrumbs. ### TitleBar ```html <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> ``` ```js document.title = 'Products'; ``` ## ui-title-bar element The `ui-title-bar` element is available for use in your app. It configures the TitleBar 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 - [TitleBar Component](/docs/api/app-bridge-library/react-components/titlebar-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 ```html <ui-title-bar title="Products"> <button variant="breadcrumb">Home</button> </ui-title-bar> ``` ### Title Bar with buttons ### Title Bar with buttons ```html <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 ### Title Bar with grouped secondary buttons ```html <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> ```