Ui Layouts Layout

Overview

Fumadocs layout subsystems establish a robust architectural foundation for documentation and marketing applications, sharing common link-resolution mechanisms (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

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

Sources: packages/radix-ui/src/layouts/shared/index.tsx:33-52, packages/radix-ui/src/layouts/shared/index.tsx:256-301

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

Sources: packages/radix-ui/src/layouts/flux/index.tsx:84-196

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

Copyexport 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

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

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

Sources: packages/radix-ui/src/layouts/home/index.tsx:47-81

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

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

Sources: packages/radix-ui/src/layouts/home/index.tsx:10-13

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

Notebook Layout

The Notebook layout implements a multi-column CSS grid architecture containing a sidebar, a sticky subheader, a 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

Sources: packages/radix-ui/src/layouts/notebook/client.tsx:67-124

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, packages/base-ui/src/layouts/notebook/slots/header.tsx:199-301

Sources: packages/base-ui/src/layouts/notebook/slots/header.tsx:21-159, packages/base-ui/src/layouts/notebook/slots/header.tsx:199-301

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

CopygridTemplate:
  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

Sources: packages/radix-ui/src/layouts/notebook/slots/container.tsx:18-21

Related

• Shared Layout Architecture