`, starts with a "Skip to content" link, and keeps its footer at the bottom of a short page. `navbarBehavior` lets the bars scroll away with a document, or slide out of the way of a reading surface. ```tsx import { StackedLayout } from "@/components/ouro/sidebar/stacked-layout"; ``` ## Example ```tsx } toolbar={} > ``` ## Usage The phone menu opens once JavaScript has loaded (after hydration); the links are in the server HTML from 640px up. Use `AuthLayout` for the sign-in pages. ## Use instead when - Use `SidebarLayout` instead when the navigation is a `Sidebar`. ## Props Type: `StackedLayoutProps`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `as` | `"div" \| "main"` | `"main"` | The element around the page. Pass `"div"` when the layout renders inside a page that already has a `

`, since a document has one. | | `bleed` | `boolean` | | Removes the column and its padding, for content that runs edge to edge (a map, a cover photo). | | `children` (required) | `ReactNode` | | The page. It renders inside the page's `

`, in a centered column up to 72rem wide. | | `className` | `string` | | Layout only: height and margins (`min-h-96`). Appearance classes warn in development. | | `footer` | `ReactNode` | | A line at the bottom of the page: links, a copyright. It sits at the bottom of the screen on a short page. | | `navbar` (required) | `ReactNode` | | The app's `Navbar`. It stays at the top while the page scrolls, unless `navbarBehavior` says otherwise. | | `navbarBehavior` | `"sticky" \| "static" \| "auto-hide"` | `"sticky"` | What the navbar, and the toolbar under it, do while the page scrolls. `"sticky"` keeps them at the top. `"static"` lets them scroll away with the page, for a document. `"auto-hide"` is for a reading surface with art that runs under the bars: they slide up out of view as the reader scrolls down, and come back on a scroll up, at the top of the page, or when keyboard focus moves into them. Keyboard focus or an open menu in them holds them in view. Over the page they are translucent, with the page blurred behind them. With reduced motion they show and hide at once, without sliding. | | `ref` | `Ref` | | Reaches the rendered element. | | `skipLabel` | `string` | `"Skip to content"` | The text of the link that skips the navbar, shown when it has keyboard focus. | | `toolbar` | `ReactNode` | | A second bar right under the navbar, for the page's own tools: a search field, a view switcher, a week stepper. Usually a `Toolbar`. It runs the full width with the navbar's padding and its own line below, fills the bar's width (wrap several things in one element to put them in a row), and moves with the navbar: it sticks, scrolls away or hides with it. It is a landmark named `toolbarLabel`, so a screen-reader user can jump to it. | | `toolbarLabel` | `string` | `"Page tools"` | Names the toolbar's landmark for screen readers. It is not shown. | ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `header`: Not a prop. Ouro UI uses `navbar`: `}>`. - `hideOnScroll`: Not a prop. Use `navbarBehavior="auto-hide"`. - `sidebar`: Not a prop. A `Navbar` opens its own drawer on a phone; for a sidebar use `SidebarLayout`. - `sticky`: Not a prop. The navbar sticks by default; `navbarBehavior="static"` lets it scroll away. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn. Alignment classes (`text-center`) warn too: set alignment on a parent element.