Layout Links

Overview

Fumadocs allows adding additional links to your layouts with a links prop, like linking to your "showcase" page.

Nav

You can add new links by customising the links option of layouts.

app/layout.config.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  links: [],
  // other options
};

While baseOptions defines the options for both home and docs layout, you can customise the links shown on each of them with props. (it's just how you use React components).

import { DocsLayout, type DocsLayoutProps } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';
import { baseOptions } from '@/app/layout.config';
import { source } from '@/lib/source';
 
const docsOptions: DocsLayoutProps = {
  ...baseOptions,
  tree: source.pageTree,
  links: [],
};
 
export default function Layout({ children }: { children: ReactNode }) {
  return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
}

You can see all supported items below:

Link Item

A link to navigate to a URL/href, can be external.

app/layout.config.tsx

import { BookIcon } from 'lucide-react';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  links: [
    {
      icon: <BookIcon />,
      text: 'Blog',
      url: '/blog',
    },
  ],
};

Active Mode

The conditions to be marked as active.

Mode	Description
`url`	When browsing the specified url
`nested-url`	When browsing the url and its child pages like `/blog/post`
`none`	Never be active

app/layout.config.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  links: [
    {
      text: 'Blog',
      url: '/blog',
      active: 'nested-url',
    },
  ],
};

Secondary

Set the item as secondary, secondary items will be displayed differently on navbar.

app/layout.config.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  links: [
    {
      text: 'Blog',
      url: '/blog',
      secondary: true,
    },
  ],
};

Icon Item

Same as link item, but is shown as an icon button. Icon items are secondary by default.

app/layout.config.tsx

import { BookIcon } from 'lucide-react';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  links: [
    {
      type: 'icon',
      label: 'Visit Blog', // `aria-label`
      icon: <BookIcon />,
      text: 'Blog',
      url: '/blog',
    },
  ],
};

Button Item

Same as link item, but is shown as a button.

app/layout.config.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  links: [
    {
      type: 'button',
      text: 'Feedback',
      url: '/feedback',
    },
  ],
};

A navigation menu containing link items.

app/layout.config.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  links: [
    {
      type: 'menu',
      text: 'Guide',
      items: [
        {
          text: 'Getting Started',
          description: 'Learn to use Fumadocs',
          url: '/docs',
 
          // (optional) Props for Radix UI Navigation Menu item in Home Layout
          menu: {
            className: 'row-span-2',
            // add banner to navigation menu card
            // can be an image or other elements
            banner: <div>Banner</div>,
          },
        },
      ],
    },
  ],
};

Note that the description field will only be displayed on the navbar in Home Layout.

Custom Item

Display a custom component.

app/layout.config.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  links: [
    {
      type: 'custom',
      children: <div>Hey</div>,
    },
  ],
};

GitHub URL

There's also a shortcut for adding GitHub repository link item.

app/layout.config.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  githubUrl: 'https://github.com',
};

On this page