--- title: Title bar description: >- The admin title bar is a critical part of the Shopify Admin experience. It provides a way to display the current page title and actions for the user to take. This guide will show you how to work with the admin title bar using the App Bridge UI library. api_name: app-home source_url: html: 'https://shopify.dev/docs/api/app-home/app-bridge-web-components/title-bar' md: 'https://shopify.dev/docs/api/app-home/app-bridge-web-components/title-bar.md' --- # Title bar The admin title bar is a critical part of the Shopify Admin experience. It provides a way to display the current page title and actions for the user to take. This guide will show you how to work with the admin title bar using the App Bridge UI library. ## Use the s-page component The `s-page` component is available for use in your app. It configures the title bar in the Shopify admin in addition to managing the page layout. Note that you do not need the full App Bridge UI library to use this component. You can still use `s-page` (and its required child components) in your app. * children SPageChildren * heading string ### SPageChildren * breadcrumbActions ```ts HTMLElement ``` * primaryAction ```ts HTMLElement ``` * secondaryActions ```ts HTMLElement[] ``` ```ts interface SPageChildren { primaryAction?: HTMLElement; secondaryActions?: HTMLElement[]; breadcrumbActions?: HTMLElement; } ``` ### Examples * #### Simple s-page component ##### Default ```html Save Close Cancel ``` ## Preview ![](https://shopify.dev/images/templated-apis-screenshots/admin/app-bridge-web-components/title-bar-app-home.png) ## Examples Learn how to use the s-page component to configure the admin title bar with various actions and breadcrumbs. ### Basic title bar configuration Simple s-page component The `s-page` component accepts the following properties: * `heading`: The heading for the page. This is the title of the page. And the following slots: * `primary-action`: The primary action for the page. This is the main action for the page. * `secondary-actions`: The secondary actions for the page. This is a group of actions that are related to the page. * `breadcrumb-actions`: The breadcrumb actions for the page. This is a link to the home page or the previous page. ### Examples * #### Simple s-page component ##### Description The \`s-page\` component accepts the following properties: - \`heading\`: The heading for the page. This is the title of the page. And the following slots: - \`primary-action\`: The primary action for the page. This is the main action for the page. - \`secondary-actions\`: The secondary actions for the page. This is a group of actions that are related to the page. - \`breadcrumb-actions\`: The breadcrumb actions for the page. This is a link to the home page or the previous page. ##### Default ```html Save Close Cancel ``` ### Advanced title bar features Grouped secondary actions You can group secondary actions together using `s-menu` and the `commandfor` attribute. This will create a dropdown menu with the actions. The text content of the `s-button` used with the `commandfor` attribute will display a label for the group of actions. Breadcrumb actions You can add breadcrumb actions using the `breadcrumb-actions` slot. This will add a link to the breadcrumb actions. You can use this to add a link to the home page or to add a link to the previous page. Complete example Here is a complete example of how to use the `s-page` component to interact with the admin title bar. ### Examples * #### Grouped secondary actions ##### Description You can group secondary actions together using \`s-menu\` and the \`commandfor\` attribute. This will create a dropdown menu with the actions. The text content of the \`s-button\` used with the \`commandfor\` attribute will display a label for the group of actions. ##### Default ```html Save More actions Action 1 Action 2 Action 3 ``` * #### Breadcrumb actions ##### Description You can add breadcrumb actions using the \`breadcrumb-actions\` slot. This will add a link to the breadcrumb actions. You can use this to add a link to the home page or to add a link to the previous page. ##### Default ```html Save Cancel Home ``` * #### Complete example ##### Description Here is a complete example of how to use the \`s-page\` component to interact with the admin title bar. ##### Default ```html Save Close More actions Action 1 Action 2 Action 3 Home ``` ## Related [![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/app-home/apis/app-window) [ComponentApp Window](https://shopify.dev/docs/api/app-home/apis/app-window)