CategoryNav
作成2026年3月22日Takeshi Takatsudo
カテゴリインデックスページに子ページのカードグリッドを表示するAstroコンポーネント。
概要
CategoryNavは、カテゴリの子ページをカードグリッドとして自動的に一覧表示するAstroコンポーネントです。カテゴリのindex.mdxファイルで使用し、すべての子ページへのリンクを含むランディングページを作成するために設計されています。
ℹ️ Info
CategoryNavはすべてのMDXドキュメントページでグローバルに利用できます — インポートは不要です。アドモニションコンポーネント（Note、Tipなど）と同様に、ドキュメントページルートで登録されています。
ライブデモ
以下はCategoryNavで「はじめに」カテゴリを表示した例です：
使い方
カテゴリのindex.mdxでCategoryNavを使用してランディングページを作成します：
---
title: Getting Started
sidebar_position: 0
---
Welcome to the Getting Started section. Choose a topic below to begin.
<CategoryNav category="getting-started" />CategoryNavはAstroコンポーネント（クライアントサイドJavaScriptなし）のため、client:ディレクティブは不要です。
プロップ
| プロップ | 型 | デフォルト | 説明 |
|---|---|---|---|
category | string | （必須） | カテゴリスラッグ（例："guides"、"reference"） |
lang | Locale | 自動検出 | コンテンツコレクションのロケールを上書き |
langプロップは現在のURLパスから自動的に検出されるため、通常は設定する必要はありません。
特徴
- 2カラムグリッド — デスクトップでは
sm:grid-cols-2、モバイルではシングルカラムで表示 - カード表示 — 各カードにはページタイトル（リンク付き）とdescription（frontmatterから取得）を表示
- ホバーエフェクト — ホバー時にカードのボーダーがハイライトされ、タイトルリンクは常に下線付き
- インデックス自動除外 — カテゴリ自身のインデックスページは自動的にフィルタリング
- ポジション順ソート — カードはfrontmatterの
sidebar_position順に並びます
使用場所
任意のカテゴリのindex.mdxにCategoryNavを追加してランディングページを生成できます。例えば、「はじめに」セクションでは以下のように使用されています：
src/content/docs/
getting-started/
index.mdx ← <CategoryNav category="getting-started" /> を使用
introduction.mdx
installation.mdx
writing-docs.mdxソース
コンポーネントはsrc/components/category-nav.astroに定義されています。