Navigation

SidebarLayout

The shell of an app with a Sidebar: the sidebar beside the page from 640px up, in view while the page scrolls, and a sticky top bar with the sidebar's menu button below 640px. It renders the page's <main> and starts with a "Skip to content" link.

Kitchen of Ari

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/sidebar-layout#v1.2.13

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/sidebar-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/sidebar-layout#v1.2.13 ourostack/ouro-ui/sidebar-layout-tests#v1.2.13

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

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

Example

<SidebarLayout
  sidebar={<Sidebar label="Main" sections={sections} currentPath={pathname} />}
  header={<TextField label="Search" hideLabel type="search" />}
>
  <Outlet />
</SidebarLayout>

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 StackedLayout instead when the navigation is a Navbar across the top.

Props

Type: SidebarLayoutProps.

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 padding around the page, 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>.
className: Type: string; Layout only: height and margins (min-h-96). Appearance classes warn in development.
header: Type: ReactNode; A bar above the page: a search field, the page's actions. From 640px up it runs across the top of the page, beside the sidebar; below, it shares the top bar with the menu button. It renders in a <header>, the page's banner landmark.
ref: Type: Ref<HTMLDivElement>; Reaches the rendered element.
sidebar (required): Type: ReactNode; The app's Sidebar. It sits beside the page from 640px up, and is a menu button in the top bar below.
skipLabel: Type: string; Default: "Skip to content"; The text of the link that skips the sidebar, 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 padding around the page, for content that runs edge to edge (a map, a cover photo).
`children` (required)	`ReactNode`		The page. It renders inside the page's `<main>`.
`className`	`string`		Layout only: height and margins (`min-h-96`). Appearance classes warn in development.
`header`	`ReactNode`		A bar above the page: a search field, the page's actions. From 640px up it runs across the top of the page, beside the sidebar; below, it shares the top bar with the menu button. It renders in a `<header>`, the page's banner landmark.
`ref`	`Ref<HTMLDivElement>`		Reaches the rendered element.
`sidebar` (required)	`ReactNode`		The app's `Sidebar`. It sits beside the page from 640px up, and is a menu button in the top bar below.
`skipLabel`	`string`	`"Skip to content"`	The text of the link that skips the sidebar, 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.

navbar: Not a prop. The bar above the page is header: <SidebarLayout sidebar={…} header={…}>.

`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