App-shell layout: a fixed sidebar plus a top app bar wrapping the main content. On small screens the sidebar collapses behind a hamburger button and opens as an overlay.
Use Layout as the top-level page frame for an authenticated app: navigation in the sidebar, page chrome in the app bar, and the routed page in children. It manages its own responsive sidebar open/close state, so it is a client component.
There is no @uxf/form twin — Layout is a structural component.
import { Layout } from "@uxf/ui/layout";
<Layout appBar={<AppBarContent />} sidebar={<Navigation />} sidebarHeader={<Logo />}>
<PageContent />
</Layout>;
At the md breakpoint and up the sidebar is always visible; below it, the app bar shows a menu button that opens the sidebar as an overlay.
| Prop | Type | Default | Description |
|---|---|---|---|
children |
ReactNode |
— | Main page content (rendered in <main>). |
sidebar |
ReactNode |
— | Sidebar content (e.g. navigation). |
sidebarHeader |
ReactNode |
— | Content above the sidebar body; rendered only when provided. |
appBar |
ReactNode |
— | Content of the top app bar. |
className |
string |
— | Class on the layout root. |
classNameAppBar |
string |
— | Class on the app bar. |
Import the layout stylesheet, plus the Button and IconButton stylesheets (the mobile menu button is an IconButton), once in your global CSS:
@import url("@uxf/ui/css/button.css");
@import url("@uxf/ui/css/icon-button.css");
@import url("@uxf/ui/css/layout.css");
Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.
layout.css defines its own --uxf-layout-* CSS variables (sidebar width and colors, app bar height and colors), which you can override per app.
The menu button's accessible label comes from the @uxf/ui translations (uxf-ui-layout:open-menu key), so the app must register @uxf/ui/translations with useUxfTranslation.