---
title: App Bridge web components
description: App Bridge web components add UI elements like navigation menus, title bars, and save bars to the Shopify admin outside your app's iframe.
api_name: app-home
source_url:
html: https://shopify.dev/docs/api/app-home/app-bridge-web-components
md: https://shopify.dev/docs/api/app-home/app-bridge-web-components.md
---
# App Bridge web components
While [Web components](https://shopify.dev/docs/api/app-home/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 (
);
}
```
***
## Available components
##
[](https://shopify.dev/docs/api/app-home/app-bridge-web-components/app-nav)
[App nav](https://shopify.dev/docs/api/app-home/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/app-bridge-web-components/app-nav)
[](https://shopify.dev/docs/api/app-home/app-bridge-web-components/app-window)
[App window](https://shopify.dev/docs/api/app-home/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/app-bridge-web-components/app-window)
[](https://shopify.dev/docs/api/app-home/app-bridge-web-components/title-bar)
[Title bar](https://shopify.dev/docs/api/app-home/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/app-bridge-web-components/title-bar)
[](https://shopify.dev/docs/api/app-home/app-bridge-web-components/save-bar)
[Save bar](https://shopify.dev/docs/api/app-home/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/app-bridge-web-components/save-bar)
***