TitleBar
The TitleBar
action set allows you to populate a standardized title bar with button actions and navigation breadcrumbs.
Create an app and import the TitleBar
module from @shopify/app-bridge/actions
. Note that we'll be referring to this sample application throughout the examples below.
Create a title bar
Anchor link to section titled "Create a title bar"Create a title bar with the title set to My page title
:
Create a title bar with a primary button
Anchor link to section titled "Create a title bar with a primary button"You can set the title bar's primary button to a button. To learn more about buttons, see Button.
Create a title bar with secondary buttons
Anchor link to section titled "Create a title bar with secondary buttons"You can set the title bar's secondary buttons to one or more buttons. The following example creates a secondary action with the label Settings, which triggers a redirect to a settings page local to the app.
To learn more, see Button and Redirect.
Create a title bar with grouped secondary buttons
Anchor link to section titled "Create a title bar with grouped secondary buttons"You can set the title bar's secondary buttons to one or more button groups. The following example creates a grouped secondary action with the label More actions, which contains two child buttons.
To learn more, see ButtonGroup and Button.
Update title bar options
Anchor link to section titled "Update title bar options"You can call the set
method with partial title bar options to update the options of an existing title bar. This automatically triggers the update
action on the title bar and merges the given options with the existing options:
Update title bar primary/secondary buttons
Anchor link to section titled "Update title bar primary/secondary buttons"You can update buttons attached to a title bar. Any updates made to the title bar's children automatically trigger an update
action on the title bar:
Create a title bar with breadcrumbs
Anchor link to section titled "Create a title bar with breadcrumbs"You can enable breadcrumbs in the title bar by setting a button as the breadcrumb option. You can disable it by setting the option to undefined
. Note: Breadcrumbs aren't shown without a title. The following example creates a breadcrumb with the label 'My Breadcrumb', which links to '/breadcrumb-link'.
To learn more, see Button and Redirect.
Subscribe to title bar updates
Anchor link to section titled "Subscribe to title bar updates"You can subscribe to the title bar update action by calling subscribe
. This returns a function that you can call to unsubscribe from the action:
Unsubscribe
Anchor link to section titled "Unsubscribe"You call unsubscribe
to remove all subscriptions on the titlebar and its children:
Unsubscribe from titlebar actions only
Anchor link to section titled "Unsubscribe from titlebar actions only"You call unsubscribe
with false
to remove only titlebar subscriptions while leaving child subscriptions intact. For example, you might want to unsubscribe from the title bar but keep button listeners so that the buttons can be reused in a different actions (such as a modal).