---
title: "Ui Layouts Layout"
description: "Fumadocs layout subsystems establish a robust architectural foundation for documentation and marketing applications, sharing common link-resolution mechanisms (Shared Layout Architecture), tree con..."
last_updated: "2026-10-12T07:53:59.981993+00:00"
canonical_url: "https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/ui-layouts/ui-layouts-layout"
---

<details>
<summary>Relevant source files</summary>

The following files were used as context for generating this wiki page:

- [packages/radix-ui/src/layouts/flux/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/flux/index.tsx)
- [packages/base-ui/src/layouts/flux/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/flux/index.tsx)
- [packages/base-ui/src/layouts/notebook/slots/sidebar.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/notebook/slots/sidebar.tsx)
- [packages/radix-ui/src/layouts/notebook/slots/sidebar.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/notebook/slots/sidebar.tsx)
- [packages/base-ui/src/layouts/flux/slots/sidebar.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/flux/slots/sidebar.tsx)
- [packages/radix-ui/src/layouts/flux/slots/sidebar.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/flux/slots/sidebar.tsx)
- [packages/base-ui/src/layouts/flux/page/slots/container.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/flux/page/slots/container.tsx)
- [packages/radix-ui/src/layouts/home/slots/header.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/home/slots/header.tsx)
- [packages/radix-ui/src/layouts/flux/page/slots/container.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/flux/page/slots/container.tsx)
- [packages/radix-ui/src/layouts/notebook/slots/header.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/notebook/slots/header.tsx)
- [packages/base-ui/src/layouts/flux/slots/container.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/flux/slots/container.tsx)
- [packages/radix-ui/src/layouts/notebook/page/slots/container.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/notebook/page/slots/container.tsx)
- [packages/base-ui/src/layouts/notebook/slots/header.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/notebook/slots/header.tsx)
- [packages/radix-ui/src/layouts/flux/slots/container.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/flux/slots/container.tsx)
- [packages/radix-ui/src/layouts/notebook/slots/container.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/notebook/slots/container.tsx)
- [packages/base-ui/src/layouts/notebook/page/slots/container.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/notebook/page/slots/container.tsx)
- [packages/base-ui/src/layouts/notebook/slots/container.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/notebook/slots/container.tsx)
- [packages/radix-ui/src/layouts/notebook/client.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/notebook/client.tsx)
- [packages/base-ui/src/layouts/notebook/client.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/notebook/client.tsx)
- [packages/radix-ui/src/layouts/flux/page/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/flux/page/index.tsx)
- [packages/radix-ui/src/components/sidebar/base.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/components/sidebar/base.tsx)
- [packages/base-ui/src/components/sidebar/base.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/components/sidebar/base.tsx)
- [packages/base-ui/src/layouts/flux/page/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/flux/page/index.tsx)
- [packages/radix-ui/src/layouts/home/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/home/index.tsx)
- [packages/base-ui/src/layouts/home/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/home/index.tsx)
- [packages/radix-ui/src/layouts/shared/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/shared/index.tsx)
- [packages/radix-ui/src/layouts/notebook/page/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/notebook/page/index.tsx)
- [packages/radix-ui/css/preset-legacy.css](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/css/preset-legacy.css)
- [packages/base-ui/src/layouts/shared/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/shared/index.tsx)
- [packages/base-ui/src/layouts/notebook/page/index.tsx](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/notebook/page/index.tsx)
</details>

## Overview

Fumadocs layout subsystems establish a robust architectural foundation for documentation and marketing applications, sharing common link-resolution mechanisms ([Shared Layout Architecture](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/ui-layouts/shared-layout-architecture)), tree context providers, and design tokens across different user interface frameworks. The system centers on composable slots, context providers, and dynamic link resolution via `resolveLinkItems` and `useLinkItems`, allowing developers to structure navigation items into designated menu buckets or inline header links.

Sources: [packages/radix-ui/src/layouts/shared/index.tsx:33-52](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/shared/index.tsx#L33-L52)

The application packages provide three distinct layout variants—Flux, Home, and Notebook—that consume these shared primitives to organize sidebars, responsive navigation bars, and article viewports.

Sources: [packages/radix-ui/src/layouts/shared/index.tsx:256-301](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/shared/index.tsx#L256-L301)

```mermaid
graph TD
    A["BaseLayoutProps"] --> B["resolveLinkItems"]
    B --> C["useLinkItems"]
    C --> D["LayoutContext"]
    D --> E["Flux Layout"]
    D --> F["Home Layout"]
    D --> G["Notebook Layout"]
```

Sources: [packages/radix-ui/src/layouts/shared/index.tsx:33-52](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/shared/index.tsx#L33-L52), [packages/radix-ui/src/layouts/shared/index.tsx:256-301](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/shared/index.tsx#L256-L301)

## Flux Documentation Layout

The Flux layout arranges a modern documentation experience featuring a responsive navigation panel, a customizable sidebar drawer system, and a centered article container. The layout entry point `DocsLayout` initializes a `LayoutContext` carrying resolved menu items, base layout properties, and slot mappings, wrapping its descendants in a `TreeContextProvider` and a sidebar provider.

Sources: [packages/radix-ui/src/layouts/flux/index.tsx:84-196](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/flux/index.tsx#L84-L196)

```mermaid
graph TD
    A["DocsLayout"] --> B["TreeContextProvider"]
    B --> C["sidebar.provider"]
    C --> D["slots.container"]
    D --> E["sidebar.root"]
    D --> F["children / DocsPage"]
    C --> G["NavigationPanel"]
```

Sources: [packages/radix-ui/src/layouts/flux/index.tsx:84-196](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/flux/index.tsx#L84-L196)

Layout tabs are derived dynamically from the page tree using `getLayoutTabs`, or passed explicitly as an array of `LayoutTab` objects. The `NavigationPanel` renders header elements, language selectors, search triggers, theme switches, and icon links within a motion-animated header container.

Sources: [packages/radix-ui/src/layouts/flux/index.tsx:44-52](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/flux/index.tsx#L44-L52)

```typescript
export interface DocsLayoutProps extends BaseLayoutProps {
  tree: PageTree.Root;
  sidebar?: SidebarOptions;
  tabs?: LayoutTab[] | GetLayoutTabsOptions | false;
  slots?: Partial<DocsSlots>;
  renderNavigationPanel?: (props: NavigationPanelProps) => ReactNode;
  containerProps?: ComponentProps<'div'>;
}
```

Sources: [packages/radix-ui/src/layouts/flux/index.tsx:44-52](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/flux/index.tsx#L44-L52)

The Flux sidebar component uses `SidebarContent` with `RemoveScroll` to manage keyboard escape event listeners, backdrop blurs, and animated entrance/exit states when toggled open.

Sources: [packages/radix-ui/src/layouts/flux/slots/sidebar.tsx:111-186](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/flux/slots/sidebar.tsx#L111-L186)

## Home Layout

The Home layout provides a marketing or landing page structure via `HomeLayout`, rendering a top navigation header and a main content container. It resolves navigation links through `useLinkItems` and makes them available via `useHomeLayout`.

Sources: [packages/radix-ui/src/layouts/home/index.tsx:47-81](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/home/index.tsx#L47-L81)

```mermaid
graph TD
    A["HomeLayout"] --> B["HomeSlots Context"]
    B --> C["slots.container"]
    C --> D["slots.header"]
    C --> E["children"]
```

Sources: [packages/radix-ui/src/layouts/home/index.tsx:47-81](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/home/index.tsx#L47-L81)

The header slot utilizes `HeaderNavigationMenu` to support transparent mode variants (`always`, `top`, or `none`). When `transparentMode` is set to `top`, it monitors scroll position via `useIsScrollTop` to toggle background opacities dynamically.

Sources: [packages/radix-ui/src/layouts/home/slots/header.tsx:144-173](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/home/slots/header.tsx#L144-L173)

```typescript
export interface HomeLayoutProps extends BaseLayoutProps, ComponentProps<'main'> {
  nav?: Nav;
  slots?: Partial<HomeSlots>;
}
```

Sources: [packages/radix-ui/src/layouts/home/index.tsx:10-13](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/home/index.tsx#L10-L13)

Mobile viewports automatically switch to a collapsible navigation menu dropdown triggered by a chevron button, which renders both primary and secondary link items alongside language selectors and theme switches.

Sources: [packages/radix-ui/src/layouts/home/slots/header.tsx:89-133](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/home/slots/header.tsx#L89-L133)

## Notebook Layout

The Notebook layout implements a multi-column CSS grid architecture containing a sidebar, a sticky subheader, a [table of contents](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/ui-layouts/table-of-contents), and a central article viewport. The grid columns are dynamically computed based on sidebar collapse states and layout width variables.

Sources: [packages/radix-ui/src/layouts/notebook/client.tsx:67-124](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/notebook/client.tsx#L67-L124)

```mermaid
graph TD
    A["LayoutBody"] --> B["TreeContextProvider"]
    B --> C["SidebarProvider"]
    C --> D["Container (CSS Grid)"]
    D --> E["Header / Subnav"]
    D --> F["Sidebar Root"]
    D --> G["Page Children"]
```

Sources: [packages/radix-ui/src/layouts/notebook/client.tsx:67-124](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/notebook/client.tsx#L67-L124)

The header execution flow for `Header` coordinates touch detection, responsive menus, and navigation items. When evaluating `Header`, it delegates item rendering to `NavbarLinkItem` and `NavbarLinkItemMenu`.

Sources: [packages/base-ui/src/layouts/notebook/slots/header.tsx:21-159](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/notebook/slots/header.tsx#L21-L159), [packages/base-ui/src/layouts/notebook/slots/header.tsx:199-301](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/notebook/slots/header.tsx#L199-L301)

```mermaid
sequenceDiagram
    participant Header as Header
    participant Item as NavbarLinkItem
    participant Menu as NavbarLinkItemMenu
    Header->>Item: Render navItems
    alt item.type === 'menu'
        Item->>Menu: Delegate item rendering
        Menu->>Menu: Handle pointer events & popover state
    else item.type === 'main' or standard link
        Item->>Item: Render LinkItem component
    end
```

Sources: [packages/base-ui/src/layouts/notebook/slots/header.tsx:21-159](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/notebook/slots/header.tsx#L21-L159), [packages/base-ui/src/layouts/notebook/slots/header.tsx:199-301](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/base-ui/src/layouts/notebook/slots/header.tsx#L199-L301)

The grid template adapts depending on whether `nav.mode` is set to `top` or `auto`:

Sources: [packages/radix-ui/src/layouts/notebook/slots/container.tsx:31-38](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/notebook/slots/container.tsx#L31-L38)

```typescript
gridTemplate:
  nav?.mode === 'top'
    ? `". header header header ."
"sidebar sidebar toc-popover toc-popover ."
"sidebar sidebar main toc ." 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`
    : `"sidebar sidebar header header ."
"sidebar sidebar toc-popover toc-popover ."
"sidebar sidebar main toc ." 1fr / minmax(min-content, 1fr) var(--fd-sidebar-col) minmax(0, ${pageCol}) var(--fd-toc-width) minmax(min-content, 1fr)`
```

Sources: [packages/radix-ui/src/layouts/notebook/slots/container.tsx:31-38](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/notebook/slots/container.tsx#L31-L38)

> [!NOTE]
> During sidebar collapse state transitions, `Container` sets `data-column-changed=true` for an instant to trigger smooth CSS grid template column transitions.

Sources: [packages/radix-ui/src/layouts/notebook/slots/container.tsx:18-21](https://github.com/blade47/fumadocs/blob/a9f988897e7dc4ef3d62b2865d80da2f5607701e/packages/radix-ui/src/layouts/notebook/slots/container.tsx#L18-L21)

## Related

- [Shared Layout Architecture](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/technical/ui-layouts/shared-layout-architecture)


## Sitemap

See the full [sitemap](https://www.doc0.dev/docs/e8872a72-1909-479c-b585-dc74c6e26726/llms.txt) for all pages in this wiki.