Components / Patterns
Application header
One 56 px row for the session chrome of an app: brand, navigation, a command slot and actions.
@fabrials/ui
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { AppHeader, AppHeaderBrand, AppHeaderLogo, AppHeaderNav, AppHeaderLink, AppHeaderAction, AppHeaderLabel, AppHeaderCaret, AppHeaderPlaceholder } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
brand / navigation / command / actions | ReactNode | The slots, in that order: the brand, the navigation, then the command slot and the actions pushed to the end. |
sticky | boolean | Stays under the top of its scroll container. |
AppHeaderLink current | boolean | aria-current page, full ink and a 2 px Stormlight bar on the header hairline. |
AppHeaderBrand / AppHeaderLink render | ReactElement | Pass the host's router link. |
AppHeaderLabel | span | Text that becomes screen-reader text below 48rem; its AppHeaderAction turns into a square icon. |
Behavior
Modes are container queries on the header's own width: compact below 48rem, medium to 72rem, wide from there (the command slot grows to 14, 18 and 22rem), the brand name gives way at 24rem and the row wraps in two at 19rem. The command slot is the size container named command, and it has a definite width in every mode: Firefox and WebKit size the actions cluster from its content, so a slot with only a flex-basis made the header overflow. Presentational: routing, the session and the palette belong to the host.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.