# AppShell
A product’s layout of regions. Born on mobile: header on top, content below, navigation in a Drawer; on wide screens, the drawer becomes the side column.
## Playground
```html
```
## When to use
- On every screen of a product with more than one place to go: a dashboard, an admin.
## When not to use
- **A standalone reading page** or documentation: just the content, or DocPage.
## Examples
### On mobile
Scroll inside the frame and tap Menu: the drawer slides in from the right, with the account and "Sign out" in its footer. At the end of the content, ScrollFade and BackToTop.
Show code
```html
```
### On wide screens
From a 64rem frame, the drawer becomes the side column, with its footer at the bottom; Menu disappears. The example is shrunk by half.
Show code
```html
```
## The regions
Region
What goes there
`brand`
The product name, leading home. Required.
`actions`
Optional, at most two pieces used all the time. Never the account or "Sign out".
`menu`
The button that opens the drawer, last, on the right. Gone on wide screens.
`nav`
A Nav, inside a Drawer on mobile.
`nav-footer`
Optional: who is signed in, "Sign out", the version.
`main`
The screen itself, with the main task first. Carries ScrollFade and BackToTop.
## Anatomy
1. **brand:** leads home.
2. **actions**, optional: what is used all the time.
3. **menu:** opens the drawer, on the right, by the thumb.
4. **main:** the screen itself.
## States
- **Scrolling down:** the header slides away; scrolling up, it returns. Near the top, or with focus inside it, it stays in view.
- **Large screens:** content stops at 72rem and stays centered.
## Do and don’t
Do
Brand and Menu in the header; the account and "Sign out" in the drawer footer.
What is used all the time stays at hand; the rest, tucked away.
Don’t
"Sign out" pinned in the header, next to Menu, on every screen.
The best spot on the screen for the least used action.
## Accessibility
- Real regions: ``, a named `