'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Layout
AppShell
The app frame: a sticky header, a sidebar that turns into a drawer on small screens, the main area and a skip link.
Ant Design: Layout, Menu (inline)
import { AppShell, SidebarNav, SidebarGroup, SidebarLink } from '@alea/ui';
Examples
AppShell
Header, sidebar and content. Narrow the window: the sidebar moves into a drawer behind the menu button.
Props
AppShell props
The app frame: sticky header, sidebar, scrollable content and a skip link (Ant's Layout).
| Prop | Type | Default | Description |
|---|---|---|---|
brand | ReactNode | - | Logo or product name, top left. |
className | string | - | Extra class names for the root element. |
collapseBelow | number | 900 | Below this width the sidebar goes into a drawer. Default 900 px. |
headerEnd | ReactNode | - | Things on the right of the header: search, theme toggle, avatar. |
mainAs | "div" | "main" | 'main' | The content element: main (default), or div when the shell sits inside a page that already has a main (demos, embeds). |
sidebar | ReactNode | - | The side navigation (a SidebarNav). On small screens it moves into a drawer. |
sidebarWidth | number | 248 | Sidebar width. Default 248 px. |
SidebarGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The SidebarLinks. |
title | ReactNode | - | Small uppercase title of the group. |
SidebarLink props
A link in the side navigation.
| Prop | Type | Default | Description |
|---|---|---|---|
end | ReactNode | - | A count or badge on the right. |
icon | ReactNode | - | An icon before the label. |
isCurrent | boolean | - | Marks the current page (aria-current). |
Accessibility
- Header, navigation and main are landmarks; the skip link jumps to main.
- The current page is marked with aria-current.
- On small screens the sidebar opens in a drawer that traps focus and closes on Escape.
Keyboard
| Key | Does |
|---|---|
| Tab (first) | Shows the skip link |
| Escape | Closes the mobile navigation |
Do and don't
Do
- Group links under short titles.
- Mark the current page with isCurrent.
Don't
- Don't nest more than two levels in the sidebar: use a Tree or a page.