Sidebar

ラベルは、各ページの frontmatter プロパティで制御します。グループを設定するかリンクを設定するかで、使うプロパティが変わります。

優先順位は次のとおりです。

sidebar.label が未定義のとき、index ページのラベルはデフォルトで Overview になります。

グループのラベルに title を使うため、リンクのラベルでは title は考慮されません。

優先順位は次のとおりです。

たとえば、次のページがあるとします。

---
title: Bar
sidebar:
  label: IndexTitle
  group:
    label: GroupTitle
---

---
title: Baz
sidebar:
  label: PageTitle
---

サイドバーの構造は次のようになります。

両方から sidebar プロパティを除くと、次のようになります。

リンクとグループはどちらも、並び順に sidebar.order frontmatter プロパティを使います。グループの並びは、index ページの order に従います。

sidebar.order を指定しない場合は、アルファベット順にフォールバックします。

たとえば、次のページがあるとします。

---
title: Alpha
sidebar:
  order: 3
---

---
title: Beta
sidebar:
  order: 2
---

サイドバーの構造は次のようになります。

両方から sidebar プロパティを除くと、次のようになります。

サイドバーからページを非表示にするプロパティは 3 つあります。

このプロパティは、ページがグループの index ページでない場合にだけ使います。

---
title: Placeholder
sidebar:
  hidden: true
---

グループのラベルと並び順の設定は index ページに依存するため、サイドバーコンポーネントには渡したうえで、グループのラベル付けと並び替えのあとで取り除く専用プロパティがあります。

---
title: Placeholder
sidebar:
  group:
    hideIndex: true
---

import { DirectoryListing } from "~/components";

<DirectoryListing />

グループを 1 ページのように描画し、index ページへリンクさせるには、トップレベルの hideChildren プロパティを使います。

リンクの横にバッジを付けるには、sidebar.badge プロパティを使います。

---
title: Example
sidebar:
  badge: New!
---

グループラベルの横にバッジを付けるには、そのグループの index.mdx frontmatter で sidebar.group.badge を使います。

---
title: Examples
sidebar:
  group:
    badge: New!
---

URL が「Beta」の可用性ステータスを持つディレクトリエントリと一致するサイドバーのリンクとグループには、Beta バッジが自動で付きます。 このバッジは frontmatter では制御しません。src/content/directory/ のエントリに紐づくプロダクト可用性データから導出されます。