Navigation

StackedLayout

The shell of an app with a Navbar: the bar across the top, in view while the page scrolls, and the page below it in a centered column. It renders the page's <main>, starts with a "Skip to content" link, and keeps its footer at the bottom of a short page.

Spoonjoy

Recipes

Twelve saved recipes.

Install

Once per app, with Tailwind CSS v4 and an @/* path alias (Ouro HX is built on Base UI, so --base base; skip -t in an existing app):

npx shadcn@latest init --base base --preset nova --yes --no-monorepo

npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.2.13

Then the component. From v0.8.0 it installs only the helpers it imports and never touches your stylesheet (Installing):

npx shadcn@latest add ourostack/ouro-ui/stacked-layout#v1.2.13

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/stacked-layout

Its tests, stories and Playwright spec are optional. They need Vitest 4.1.11 or later, and from v0.8.0 never change a version your app has (Testing):

npx shadcn@latest add ourostack/ouro-ui/stacked-layout#v1.2.13 ourostack/ouro-ui/stacked-layout-tests#v1.2.13

import { StackedLayout } from "@/components/ouro/sidebar/stacked-layout";

Paths use shadcn's default @/ alias; the CLI rewrites them to yours.

Example

<StackedLayout navbar={<Navbar label="Main" items={items} currentPath={pathname} />}>
  <Outlet />
</StackedLayout>

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.

as: Type: "div" | "main"; Default: "main"; The element around the page. Pass "div" when the layout renders inside a page that already has a <main>, since a document has one.
bleed: Type: boolean; Removes the column and its padding, for content that runs edge to edge (a map, a cover photo).
children (required): Type: ReactNode; The page. It renders inside the page's <main>, in a centered column up to 72rem wide.
className: Type: string; Layout only: height and margins (min-h-96). Appearance classes warn in development.
footer: Type: 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): Type: ReactNode; The app's Navbar. It stays at the top while the page scrolls.
ref: Type: Ref<HTMLDivElement>; Reaches the rendered element.
skipLabel: Type: string; Default: "Skip to content"; The text of the link that skips the navbar, shown when it has keyboard focus.

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 `<main>`, 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 `<main>`, 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.
`ref`	`Ref<HTMLDivElement>`		Reaches the rendered element.
`skipLabel`	`string`	`"Skip to content"`	The text of the link that skips the navbar, shown when it has keyboard focus.

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: <StackedLayout navbar={<Navbar … />}>.
sidebar: Not a prop. A Navbar opens its own drawer on a phone; for a sidebar use SidebarLayout.

`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.

Source on GitHub This page as Markdown