Layout Links

Overview

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

Nav

app/layout.config.tsx

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

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',
    },
  ],
};

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: <Button variant="primary">Login</Button>,
      secondary: true,
    },
  ],
};

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