Links API

Introduction

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

Link Item

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

import { DocsLayout } from 'fumadocs-ui/layout';
import { BookIcon } from 'lucide-react';
 
<DocsLayout
  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

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout
  links={[
    {
      text: 'Blog',
      url: '/blog',
      active: 'nested-url',
    },
  ]}
/>;

Secondary

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

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout
  links={[
    {
      text: 'Blog',
      url: '/blog',
      secondary: true,
    },
  ]}
/>;

Filter

You can restrict where the item is displayed.

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout
  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.

import { DocsLayout } from 'fumadocs-ui/layout';
import { BookIcon } from 'lucide-react';
 
<DocsLayout
  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.

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout
  links={[
    {
      type: 'button',
      text: 'Feedback',
      url: '/feedback',
    },
  ]}
/>;

A dropdown menu containing multiple items.

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout
  links={[
    {
      type: 'menu',
      text: 'Guide',
      items: [{ ... }],
    },
  ]}
/>

Custom Item

Display a custom component.

import { DocsLayout } from 'fumadocs-ui/layout';
 
<DocsLayout
  links={[
    {
      type: 'custom',
      children: <div>Hey</div>,
    },
  ]}
/>;

On this page