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.
import { BookIcon } from 'lucide-react';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
export const baseOptions: BaseLayoutProps = {
links: [
{
icon: <BookIcon />,
text: 'Blog',
url: '/blog',
},
],
};
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 type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
export const baseOptions: BaseLayoutProps = {
links: [
{
text: 'Blog',
url: '/blog',
active: 'nested-url',
},
],
};
Set the item as secondary, secondary items will be displayed differently on navbar.
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
export const baseOptions: BaseLayoutProps = {
links: [
{
text: 'Blog',
url: '/blog',
secondary: true,
},
],
};
You can restrict where the item is displayed.
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
export const baseOptions: BaseLayoutProps = {
links: [
{
on: 'menu',
url: '/blog',
text: 'Blog',
},
],
};
Same as link item, but is shown as an icon button on navbar.
Icon items are secondary by default.
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',
},
],
};
Same as link item, but is shown as a button.
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.
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.
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>,
},
},
],
},
],
};
Display a custom component.
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
export const baseOptions: BaseLayoutProps = {
links: [
{
type: 'custom',
children: <div>Hey</div>,
},
],
};
