Flux Layout

A docs layout that impractically minimal & clean, originally made for experimental purpose.

Flux

Install via Fumadocs CLI

For advanced customisation that supported options cannot suffice.

npx @fumadocs/cli@latest customise

Usage

Enable the Flux layout with fumadocs-ui/layouts/flux.

layout.tsx

import { DocsLayout } from 'fumadocs-ui/layouts/flux';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout {...baseOptions()} tree={source.getPageTree()}>
      {children}
    </DocsLayout>
  );
}

Make sure to update your page import too:

page.tsx

import { ... } from 'fumadocs-ui/layouts/docs/page';
import { ... } from 'fumadocs-ui/layouts/flux/page';

Important to know

It is best to be paired with static/local search, the navigation is more efficient using document search.
It prioritizes subjective aesthetics over user experience.
It is opinionated, use Fumadocs CLI for customisation instead.

Configurations

The options are inherited from Docs Layout, with minor differences:

Flux layout is a client component, you cannot pass unserializable props from a server component.
A renderNavigationPanel prop to customise the bottom navigation panel.
There is no tocPopover options.

Usage

Configurations

On this page