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.