# Fumadocs UI (the default theme of Fumadocs): レイアウト
URL: /ja/docs/ui/layouts
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/layouts/index.ja.mdx

レイアウトコンポーネントの一覧です。

## 概要 [#overview]

Fumadocs UI には、コンテンツを表示するための基本的なレイアウトが用意されています。

- [レイアウトのリンク](/ja/docs/ui/layouts/links): すべてのレイアウトで共通のナビゲーション設定です。
- [ナビゲーションバー](/ja/docs/ui/layouts/nav): ナビゲーションバーとヘッダーの設定。
- [Docs レイアウト](/ja/docs/ui/layouts/docs): ドキュメントページのレイアウト
- [Flux レイアウト](/ja/docs/ui/layouts/flux): 極限までミニマルなドキュメント向けレイアウト
- [Glass レイアウト](/ja/docs/ui/layouts/glass): 半透明のサイドバーとヘッダーがフローティング表示されるドキュメントレイアウト
- [ホームレイアウト](/ja/docs/ui/layouts/home-layout): その他のページで共通して使用するレイアウト
- [Notebook レイアウト](/ja/docs/ui/layouts/notebook): Docs レイアウトのコンパクト版
- [Spacious レイアウト](/ja/docs/ui/layouts/spacious): Docs レイアウトよりも余白を広くとったバージョン
- [ドキュメントページ](/ja/docs/ui/layouts/page): ドキュメント内の 1 ページ
- [Root Provider](/ja/docs/ui/layouts/root-provider): Fumadocs UI のコンテキストプロバイダーです。

### 設定 [#configurations]

各レイアウトでは、共通のオプションを利用できます。

これらのオプションは1つのファイルにまとめ、各レイアウトに渡すことをおすすめします。

```tsx tab="Shared Options" title="lib/layout.shared.tsx"
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    nav: {
      title: 'My App',
    },
  };
}
```

```tsx tab="Docs Layout" title="app/docs/layout.tsx"
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      // [!code highlight]
      {...baseOptions()}
      tree={source.getPageTree()}
    >
      {children}
    </DocsLayout>
  );
}
```

```tsx tab="Home Layout" title="app/(home)/layout.tsx"
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import { baseOptions } from '@/lib/layout.shared';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <HomeLayout
      // [!code highlight]
      {...baseOptions()}
    >
      {children}
    </HomeLayout>
  );
}
```

[`links`](/docs/ui/layouts/links) オプションと [`nav`](/docs/ui/layouts/nav) オプションの詳細は、それぞれのドキュメントを参照してください。

### BaseLayoutProps

| Prop            | Type                                         | Description       |
| --------------- | -------------------------------------------- | ----------------- |
| `githubUrl?`    | `string \| undefined`                        | GitHub url        |
| `links?`        | `LinkItemType[] \| undefined`                |                   |
| `nav?`          | `NavOptions \| undefined`                    | navigation config |
| `slots?`        | `Partial<BaseSlots> \| undefined`            |                   |
| `children?`     | `ReactNode`                                  |                   |
| `themeSwitch?`  | `ThemeSwitchOptions \| undefined`            |                   |
| `searchToggle?` | `SearchToggleOptions \| undefined`           |                   |
| `i18n?`         | `boolean \| I18nConfig<string> \| undefined` | **Deprecated.**   |