AppLayout

<AppLayout> is a CSS Grid container that divides the viewport into three areas: a full-height sidebar on the left, a fixed header on the top right, and a scrollable main area below the header. The grid fills 100dvh and only <AppLayout.Main> scrolls. The sidebar and header stay in place.

<AppLayout.Sidebar> renders a <Sidebar> internally and <AppLayout.Header> renders a <TopNavigation> internally, so you can place their sub-components directly without extra nesting.

Usage

Basic structure

<AppLayout> provides three slot components. They can be placed in any order since the CSS Grid template handles positioning.

<Sidebar.Provider defaultOpen>
  <AppLayout>
    <AppLayout.Sidebar>
      <Sidebar.Header>{/* Logo */}</Sidebar.Header>
      <Sidebar.Nav>{/* Navigation items */}</Sidebar.Nav>
    </AppLayout.Sidebar>
    <AppLayout.Header>
      <TopNavigation.Start>{/* Toggle */}</TopNavigation.Start>
      <TopNavigation.Middle>{/* Breadcrumbs, search */}</TopNavigation.Middle>
      <TopNavigation.End>{/* User menu */}</TopNavigation.End>
    </AppLayout.Header>
    <AppLayout.Main>{/* Scrollable page content */}</AppLayout.Main>
  </AppLayout>
</Sidebar.Provider>

import { AppLayout, Sidebar, TopNavigation } from '@marigold/components';export default () => (  <div className="h-[300px] [&>div]:!h-full">    <Sidebar.Provider defaultOpen>      <AppLayout>        <AppLayout.Sidebar>          <Sidebar.Header>            <span className="text-sm font-medium">Logo</span>          </Sidebar.Header>          <Sidebar.Nav>            <Sidebar.Item href="#">Navigation 1</Sidebar.Item>            <Sidebar.Item href="#">Navigation 2</Sidebar.Item>            <Sidebar.Item href="#">Navigation 3</Sidebar.Item>          </Sidebar.Nav>        </AppLayout.Sidebar>        <AppLayout.Header>          <TopNavigation.Start>            <Sidebar.Toggle />          </TopNavigation.Start>          <TopNavigation.Middle>            <span className="text-sm">Breadcrumbs</span>          </TopNavigation.Middle>          <TopNavigation.End>            <span className="text-sm">User Menu</span>          </TopNavigation.End>        </AppLayout.Header>        <AppLayout.Main>          <div className="space-y-2 p-4">            {Array.from({ length: 5 }, (_, i) => (              <div key={i} className="rounded-sm bg-stone-50 p-3 text-sm">                Content item {i + 1}              </div>            ))}          </div>        </AppLayout.Main>      </AppLayout>    </Sidebar.Provider>  </div>);

Sidebar.Provider

Sidebar.Provider manages the sidebar's open and collapsed state. Place it outside <AppLayout> so the sidebar toggle in the header and the sidebar itself share the same state.

Pass defaultOpen to start with the sidebar expanded. Without it, the sidebar starts collapsed. See the Sidebar docs for details on collapsing behavior, drill-down navigation, and keyboard shortcuts.

Scrolling

The header always stays visible, no matter how far users scroll. Only the content inside <AppLayout.Main> is scrollable. The sidebar also stays in place, but its navigation area scrolls independently when it has too many items. This is handled by the Sidebar component internally.

Accessibility

• Landmarks: <AppLayout.Main> renders as <main>, providing a standard landmark region for screen readers. <AppLayout.Sidebar> renders an <aside> landmark automatically.
• Scrollable region: The main area is scrollable and can be navigated with keyboard (arrow keys, Page Up/Down, Home/End)
• Stacking order: The header uses z-index: 1 to ensure it stays above main content during scroll

Props

AppLayout

AppLayout.Sidebar

AppLayout.Header

AppLayout.Main

Alternative components

• Sidebar: Use standalone when you only need side navigation without a fixed header bar.

• TopNavigation: Use standalone for a horizontal navigation bar without a sidebar.

• Grid: Use for custom grid layouts that don't follow the L-shape pattern.