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.
On this page
Playground
Signed in
Background
<div class="feitio-app-frame" style="block-size: 22rem; inline-size: min(100%, 24rem); overflow-y: auto; border: var(--feitio-border-width) solid var(--feitio-color-line)"><div class="feitio-app"><header class="feitio-app-header" data-hide-on-scroll><a class="brand" href="#pg-app-content">Product</a><button type="button" class="feitio-button menu" data-size="small" popovertarget="pg-app" aria-controls="pg-app">Menu<svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-menu"></use></svg></button></header><nav class="feitio-drawer feitio-app-nav" id="pg-app" popover aria-label="Menu"><div class="drawer-header"><h2>Menu</h2><button type="button" class="feitio-button close" data-size="small" popovertarget="pg-app" popovertargetaction="hide"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Close</button></div><div class="drawer-body"><nav class="feitio-nav"><div class="group"><p class="group-title">Work</p><ul><li><a href="#playground" aria-current="page"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-calendar"></use></svg>Schedules</a></li><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-task"></use></svg>Tasks</a></li></ul></div><div class="group"><p class="group-title">Product</p><ul><li><a href="#playground"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-sliders"></use></svg>Settings</a></li></ul></div></nav></div></nav><div class="feitio-app-main" id="pg-app-content" tabindex="-1"><div style="padding: var(--feitio-space-4)"><h3>Schedules</h3><p>Reminder 1: every week, 8h.</p><p>Reminder 2: every week, 9h.</p><p>Reminder 3: every week, 10h.</p><p>Reminder 4: every week, 11h.</p><p>Reminder 5: every week, 12h.</p><p>Reminder 6: every week, 13h.</p><p>Reminder 7: every week, 14h.</p><p>Reminder 8: every week, 15h.</p><p>Reminder 9: every week, 16h.</p><p>Reminder 10: every week, 17h.</p></div><span class="feitio-scroll-fade" aria-hidden="true"></span><a class="feitio-button feitio-back-to-top" data-size="small" href="#pg-app-content"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-down"></use></svg>Top</a></div></div></div>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
<div class="feitio-app-frame">
<div class="feitio-app">
<header class="feitio-app-header" data-hide-on-scroll>
<a class="brand" href="/">Produto</a>
<button type="button" class="feitio-button menu" data-size="small" popovertarget="menu">Menu…</button>
</header>
<nav class="feitio-drawer feitio-app-nav" id="menu" popover aria-label="Principal">…</nav>
<main class="feitio-app-main" id="conteudo" tabindex="-1">
…
<span class="feitio-scroll-fade" aria-hidden="true"></span>
<a class="feitio-button feitio-back-to-top" data-size="small" href="#conteudo">…Topo</a>
</main>
</div>
</div>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
<!-- o mesmo HTML: a moldura mede a própria largura -->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
Content
- brand: leads home.
- actions, optional: what is used all the time.
- menu: opens the drawer, on the right, by the thumb.
- 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:
<header>, a named<nav>,<main>. - The SkipLink is the page’s first item.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-app-frame" | around | Measures its own width and picks the form. |
class="feitio-app" | required | The regions grid. |
data-hide-on-scroll | on the header | Hides on scroll down, on mobile. |
class="feitio-drawer feitio-app-nav" | with popover | Drawer on mobile, column on wide screens. |