Links API

Show navigation links on every page

Introduction

You can configure the navigation links displayed on every page with Links API. It is available on Home Layout and Docs Layout.

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.

ModeDescription
urlWhen browsing the specified url
nested-urlWhen browsing the url and its child pages like /blog/post
noneNever 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,
    },
  ],
};

Filter

You can restrict where the item is displayed.

app/layout.config.tsx
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
 
export const baseOptions: BaseLayoutProps = {
  links: [
    {
      on: 'menu',
      url: '/blog',
      text: 'Blog',
    },
  ],
};

Icon Item

Same as link item, but is shown as an icon button on navbar. 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',
        },
      ],
    },
  ],
};

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

Specify the props for Radix UI Navigation Menu item in Home Layout.

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',
          url: '/docs',
          menu: {
            className: 'row-span-2',
            // add banner to navigation menu card
            // can be an image or other elements
            banner: <div>Banner</div>,
          },
        },
      ],
    },
  ],
};

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>,
    },
  ],
};
Edit on GitHub

Last updated on

On this page