---
title: App Bridge web components
description: >-
While Web components build the UI inside your app's iframe, App Bridge web
components control parts of the Shopify admin that surround it. Use them to
add navigation menus, configure page titles, and manage save bar behavior so
your app feels native to merchants.
api_version: v1.0
source_url:
html: 'https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components'
md: 'https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components.md'
api_name: app-home
---
# App Bridge web components
**Info:**
App Bridge isn't versioned with Polaris. App Bridge APIs and web components are identical in every App Home reference version.
While [Web components](https://shopify.dev/docs/api/app-home/latest/web-components) build the UI inside your app's iframe, App Bridge web components control parts of the Shopify admin that surround it. Use them to add navigation menus, configure page titles, and manage save bar behavior so your app feels native to merchants.
### Adding App Bridge web components to your app
When you scaffold your app using [Shopify CLI](https://shopify.dev/docs/api/shopify-cli), the App Bridge library is added to your app automatically. You can also manually add App Bridge in any framework by adding the following script tag to your app's HTML head:
##### HTML
```html
```
##### Remix
```tsx
// app/root.tsx
export default function App() {
return (
);
}
```
For TypeScript users, Shopify provides a companion npm library for App Bridge types, available at [`@shopify/app-bridge-types`](https://www.npmjs.com/package/@shopify/app-bridge-types). You can install this library in your project using `yarn` or `npm`. Loading App Bridge in your app from [cdn.shopify.com/shopifycloud/app-bridge.js](https://cdn.shopify.com/shopifycloud/app-bridge.js) installs the latest version of the library. To keep your types in step, specify `@shopify/app-bridge-types@latest` in your `package.json` file.
***
## Available components
[](https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components/app-nav)
[App nav](https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components/app-nav)
[Create a navigation menu so merchants can browse between pages in your app.](https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components/app-nav)
[](https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components/app-window)
[App window](https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components/app-window)
[Open a fullscreen modal window to display pages from your app for larger or complex workflows.](https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components/app-window)
[](https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components/title-bar)
[Title bar](https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components/title-bar)
[Configure the admin title bar to display your app's page title, primary and secondary actions, and breadcrumb navigation.](https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components/title-bar)
[](https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components/save-bar)
[Save bar](https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components/save-bar)
[Enable automatic save bar integration for HTML forms by adding the data-save-bar attribute to your form element.](https://shopify.dev/docs/api/app-home/latest/app-bridge-web-components/save-bar)
***