Links API

Show navigation links on every page

You can configure the navigation links to be displayed on every page. This API is available on Home Layout and Docs Layout.

Item

A link to navigate to an URL, can be external.

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

To mark the item as active when browsing child pages like /blog/post, add set it as nested-url.

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

Secondary Item

Same as normal items, but are shown as icon buttons on the navbar.

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

A dropdown menu containing multiple link items.

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

Last updated on

Previous

Docs Layout

Next

Page

On this page

Edit on Github