---
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

## 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/docs/api/app-home/apis/app-window)
[ComponentApp Window](https://shopify.dev/docs/api/app-home/apis/app-window)