サイドバー

サイドバーは、ドキュメントのメインナビゲーションブロックです。サイドバーメニューの構成は themeConfig.sidebar で行えます。

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Introduction', link: '/introduction' },
          { text: 'Getting Started', link: '/getting-started' },
          ...
        ]
      }
    ]
  }
}

基本

サイドバーメニューの最も簡単な形式は、リンクの配列を 1 つ渡す方法です。最初のレベルの項目は、サイドバーの「セクション」を定義します。 text (セクションのタイトル) と items (実際のナビゲーションリンク) を含む必要があります。

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Section Title A',
        items: [
          { text: 'Item A', link: '/item-a' },
          { text: 'Item B', link: '/item-b' },
          ...
        ]
      },
      {
        text: 'Section Title B',
        items: [
          { text: 'Item C', link: '/item-c' },
          { text: 'Item D', link: '/item-d' },
          ...
        ]
      }
    ]
  }
}

各 link は実際のファイルへのパスを / で始まるように指定する必要があります。リンクの末尾に末尾のスラッシュを追加すると、対応するディレクトリの index.md が表示されます。

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Guide',
        items: [
          // This shows `/guide/index.md` page.
          { text: 'Introduction', link: '/guide/' }
        ]
      }
    ]
  }
}

サイドバー項目は、ルートレベルから数えて最大 6 レベルまでネストすることができます。6 レベルを超えるネストされた項目は無視され、サイドバーに表示されません。

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Level 1',
        items: [
          {
            text: 'Level 2',
            items: [
              {
                text: 'Level 3',
                items: [
                  ...
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

複数のサイドバー

ページパスに応じて異なるサイドバーを表示できます。たとえば、このサイトに示されているように、「ガイド」ページや「構成」ページなど、ドキュメントにさまざまなセクションのコンテンツを作成する場合があります。

そのためには、まず、目的のセクションごとにページをディレクトリに整理します。

.
├─ guide/
│  ├─ index.md
│  ├─ one.md
│  └─ two.md
└─ config/
   ├─ index.md
   ├─ three.md
   └─ four.md

次に、各セクションのサイドバーを定義するように構成を更新します。今回は、配列ではなくオブジェクトを渡す必要があります。

export default {
  themeConfig: {
    sidebar: {
      // This sidebar gets displayed when a user
      // is on `guide` directory.
      '/guide/': [
        {
          text: 'Guide',
          items: [
            { text: 'Index', link: '/guide/' },
            { text: 'One', link: '/guide/one' },
            { text: 'Two', link: '/guide/two' }
          ]
        }
      ],

      // This sidebar gets displayed when a user
      // is on `config` directory.
      '/config/': [
        {
          text: 'Config',
          items: [
            { text: 'Index', link: '/config/' },
            { text: 'Three', link: '/config/three' },
            { text: 'Four', link: '/config/four' }
          ]
        }
      ]
    }
  }
}

折りたたみ可能なサイドバーグループ

サイドバーグループに collapsed オプションを追加すると、セクションごとに表示/非表示を切り替えるためのトグルボタンが表示されます。

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Section Title A',
        collapsed: false,
        items: [...]
      }
    ]
  }
}

すべてのセクションは、デフォルトで「開いています」。最初のページ読み込み時に「閉じる」場合は、collapsed オプションを true に設定します。

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Section Title A',
        collapsed: true,
        items: [...]
      }
    ]
  }
}

useSidebar コンポーザブル

サイドバー関連のデータを返します。返されるオブジェクトには、次の型があります。

export interface DocSidebar {
  isOpen: Ref<boolean>
  sidebar: ComputedRef<DefaultTheme.SidebarItem[]>
  sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>
  hasSidebar: ComputedRef<boolean>
  hasAside: ComputedRef<boolean>
  leftAside: ComputedRef<boolean>
  isSidebarEnabled: ComputedRef<boolean>
  open: () => void
  close: () => void
  toggle: () => void
}

例

<script setup>
import { useSidebar } from 'vitepress/theme'

const { hasSidebar } = useSidebar()
</script>

<template>
  <div v-if="hasSidebar">Only show when sidebar exists</div>
</template>