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.
Anchor to use the s-page componentUse 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.
- Anchor to childrenchildrenSPageChildren
- Anchor to headingheadingstring
SPageChildren
- breadcrumbActions
HTMLElement - primaryAction
HTMLElement - secondaryActions
HTMLElement[]
interface SPageChildren {
primaryAction?: HTMLElement;
secondaryActions?: HTMLElement[];
breadcrumbActions?: HTMLElement;
}Simple s-page component
Examples
Simple s-page component
Default
<s-page heading="Page Title"> <s-button slot="primary-action" onclick="shopify.toast.show('Save')">Save</s-button> <s-button slot="secondary-actions" onclick="shopify.toast.show('Close')">Close</s-button> <s-button slot="secondary-actions" onclick="shopify.toast.show('Cancel')">Cancel</s-button> </s-page>
Preview
Anchor to examplesExamples
Learn how to use the s-page component to configure the admin title bar with various actions and breadcrumbs.
Anchor to example-basic-title-bar-configurationBasic title bar configuration
Anchor to example-simple-s-page-componentSimple 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.
Simple s-page component
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
<s-page heading="Page Title"> <s-button slot="primary-action" onclick="shopify.toast.show('Save')">Save</s-button> <s-button slot="secondary-actions" onclick="shopify.toast.show('Close')">Close</s-button> <s-button slot="secondary-actions" onclick="shopify.toast.show('Cancel')">Cancel</s-button> </s-page>
Anchor to example-advanced-title-bar-featuresAdvanced title bar features
Anchor to example-grouped-secondary-actionsGrouped 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.
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.
Anchor to example-complete-exampleComplete example
Here is a complete example of how to use the s-page component to interact with the admin title bar.
Grouped secondary actions
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
<s-page heading="Page Title"> <s-button slot="primary-action" onclick="shopify.toast.show('Save')">Save</s-button> <s-button slot="secondary-actions" commandfor="more-actions-id">More actions</s-button> <s-menu id="more-actions-id"> <s-button onclick="shopify.toast.show('Action 1')">Action 1</s-button> <s-button onclick="shopify.toast.show('Action 2')">Action 2</s-button> <s-button onclick="shopify.toast.show('Action 3')">Action 3</s-button> </s-menu> </s-page>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
<s-page heading="Page Title"> <s-button slot="primary-action" onclick="shopify.toast.show('Save')">Save</s-button> <s-button slot="secondary-actions" onclick="shopify.toast.show('Cancel')">Cancel</s-button> <s-link slot="breadcrumb-actions" href="/">Home</s-link> </s-page>Complete example
Description
Here is a complete example of how to use the `s-page` component to interact with the admin title bar.
Default
<s-page heading="Page Title"> <s-button slot="primary-action" onclick="shopify.toast.show('Save')">Save</s-button> <s-button slot="secondary-actions" onclick="shopify.toast.show('Close')">Close</s-button> <s-button slot="secondary-actions" commandfor="more-actions-id">More actions</s-button> <s-menu id="more-actions-id"> <s-button onclick="shopify.toast.show('Action 1')">Action 1</s-button> <s-button onclick="shopify.toast.show('Action 2')">Action 2</s-button> <s-button onclick="shopify.toast.show('Action 3')">Action 3</s-button> </s-menu> <s-link slot="breadcrumb-actions" href="/">Home</s-link> </s-page>
