---
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;
}
```

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

### Advanced title bar features

## Related

[Component - App Window](https://shopify.dev/docs/api/app-home/apis/app-window)