レイアウトのリンク

概要

Fumadocs では、links prop を使ってレイアウトにナビゲーションリンクを追加できます。たとえば、「ショーケース」ページへのリンクを設置できます。

lib/layout.shared.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    links: [], 
  };
}

サポートされている項目の一覧は以下のとおりです。

リンク項目

URL/href へ移動するためのリンクです。外部リンクにすることもできます。

lib/layout.shared.tsx

import { BookIcon } from 'lucide-react';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    links: [
      {
        icon: <BookIcon />,
        text: 'Blog',
        url: '/blog',
        // secondary のアイテムはナビゲーションバー上で異なる表示になります
        secondary: false,
      },
    ],
  };
}

アクティブモード

リンクをアクティブとしてマークする条件です。

モード	説明
`url`	指定した URL を閲覧しているとき
`nested-url`	指定した URL とその子ページ (`/blog/post` など) を閲覧しているとき
`none`	アクティブにしない

lib/layout.shared.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    links: [
      {
        text: 'Blog',
        url: '/blog',
        active: 'nested-url',
      },
    ],
  };
}

アイコン項目

リンク項目と同じですが、アイコンボタンとして表示されます。アイコン項目はデフォルトでセカンダリになります。

lib/layout.shared.tsx

import { BookIcon } from 'lucide-react';
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    links: [
      {
        type: 'icon',
        label: 'Visit Blog', // `aria-label`
        icon: <BookIcon />,
        text: 'Blog',
        url: '/blog',
      },
    ],
  };
}

カスタムアイテム

カスタムコンポーネントを表示します。

lib/layout.shared.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    links: [
      {
        type: 'custom',
        children: <Button variant="primary">Login</Button>,
        secondary: true,
      },
    ],
  };
}

GitHub URL

GitHub リポジトリへのリンク項目を追加するためのショートカットも用意されています。

lib/layout.shared.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function (): BaseLayoutProps {
  return {
    : 'https://github.com',
  };
}

複数のリンク項目を含むメニューです。

lib/layout.shared.tsx

import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    links: [
      {
        type: 'menu',
        text: 'Guide',
        items: [
          {
            text: 'Getting Started',
            description: 'Learn to use Fumadocs',
            url: '/docs',
          },
        ],
      },
    ],
  };
}

Home Layout では、ナビゲーションバーにナビゲーションメニュー (フルアニメーション対応) を追加できます。

app/(home)/layout.tsx

import { baseOptions } from '@/lib/layout.shared';
import type { ReactNode } from 'react';
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import {
  NavbarMenu,
  NavbarMenuContent,
  NavbarMenuLink,
  NavbarMenuTrigger,
} from 'fumadocs-ui/layouts/home/navbar';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <HomeLayout
      {...baseOptions()}
      links={[
        {
          type: 'custom',
          // ナビゲーションバーにのみ表示（モバイルメニューには表示されません）
          on: 'nav',
          children: (
            <NavbarMenu>
              <NavbarMenuTrigger>Documentation</NavbarMenuTrigger>
              <NavbarMenuContent>
                <NavbarMenuLink href="/docs">Hello World</NavbarMenuLink>
              </NavbarMenuContent>
            </NavbarMenu>
          ),
        },
        // その他の項目
      ]}
    >
      {children}
    </HomeLayout>
  );
}

レイアウトのリンク

概要

リンク項目

アクティブモード

アイコン項目

カスタムアイテム

GitHub URL

通常のメニュー

ナビゲーションメニュー

このページの内容

レイアウトのリンク

概要アンカーリンクをコピー

リンク項目アンカーリンクをコピー

アクティブモードアンカーリンクをコピー

アイコン項目アンカーリンクをコピー

カスタムアイテムアンカーリンクをコピー

GitHub URLアンカーリンクをコピー

通常のメニューアンカーリンクをコピー

ナビゲーションメニューアンカーリンクをコピー

このページの内容

概要

リンク項目

アクティブモード

アイコン項目

カスタムアイテム

GitHub URL

通常のメニュー

ナビゲーションメニュー