菜单

导航结构

相关源文件

本文档介绍了 shadcn/ui 文档网站中使用的导航配置系统。它涵盖了导航菜单的结构、配置和组织方式,以使用户能够直观地访问文档内容。

有关更广泛的文档网站架构的信息,请参阅 文档网站。有关 MDX 内容处理的详细信息,请参阅 MDX 处理

导航系统围绕一个中央配置构建,该配置定义了三个不同的导航区域:主导航、侧边栏导航和图表特定导航。

来源: apps/www/config/docs.ts1-537

配置结构

导航配置在 DocsConfig 接口中定义,并在 docsConfig 对象中实现。这种集中式方法确保了整个文档网站导航结构的统一性。

来源: apps/www/config/docs.ts3-7

主导航显示在顶部导航栏中,提供对文档网站主要部分的访问。它包含七个主要项目,涵盖核心功能领域。

导航项路由目的
主页/着陆页
文档/docs主文档入口
组件/docs/components/accordion组件库展示
区块/blocks预构建组件块
图表/charts图表组件文档
主题/themes主题配置和示例
颜色/colors颜色系统文档

主导航被配置为扁平数组结构,没有嵌套项,提供对顶级部分的直接访问。

来源: apps/www/config/docs.ts10-39

侧边栏导航提供对详细文档内容的层级访问。它被组织成主要部分,并为特定主题和组件设置了嵌套项。

入门部分

入门部分为新用户提供基础信息

来源: apps/www/config/docs.ts41-116

安装部分

安装部分提供特定于框架的设置指南

框架路由描述
Next.js/docs/installation/nextNext.js 集成指南
Vite/docs/installation/viteVite 项目设置
Laravel/docs/installation/laravelLaravel with Inertia 设置
React Router/docs/installation/react-routerReact Router 集成
Remix/docs/installation/remixRemix 框架设置
Astro/docs/installation/astroAstro 框架集成
TanStack Start/docs/installation/tanstackTanStack Start 设置
TanStack Router/docs/installation/tanstack-routerTanStack Router 集成
手动/docs/installation/manual手动安装过程

来源: apps/www/config/docs.ts118-166

组件部分

组件部分包含完整的组件库文档,按字母顺序排列。每个组件都有自己的专用文档页面,包含示例、API 参考和使用指南。

组件范围从基本的 UI 元素,如 AccordionButton,到复杂的组件,如 Data TableNavigation Menu。每个组件条目都遵循 /docs/components/{component-name} 的模式。

来源: apps/www/config/docs.ts168-421

注册表部分

注册表部分标记为“新”,并提供有关创建和管理自定义组件注册表的文档

主题路由目的
介绍/docs/registry注册表系统概述
快速入门/docs/registry/getting-started设置和基本用法
示例/docs/registry/examples注册表示例
在 v0 中打开/docs/registry/open-in-v0v0 集成
常见问题/docs/registry/faq常见问题解答
registry.json/docs/registry/registry-json注册表配置架构
registry-item.json/docs/registry/registry-item-json单个条目架构

来源: apps/www/config/docs.ts422-462

图表导航

图表导航提供图表组件系统的专用文档,分为三个主要部分

入门(图表)

基础图表文档,包括安装和主题设置

图表类型

单个图表组件文档

图表类型路由描述
面积图/docs/charts/area面积图实现
条形图/docs/charts/bar条形图组件
折线图/docs/charts/line折线图可视化
饼图/docs/charts/pie饼图组件
雷达图/docs/charts/radar雷达图实现
径向图/docs/charts/radial径向图组件

图表组件

可重用的图表相关组件

组件路由目的
工具提示/docs/charts/tooltip图表工具提示组件
图例/docs/charts/legend图表图例组件

来源: apps/www/config/docs.ts464-535

导航项支持多个属性以增强功能

  • title:导航项的显示文本
  • href:导航目标的路由或 URL
  • items:用于层级结构的子导航项的可选数组
  • label:用于特殊指示符(例如,“新”)的可选标签

label 属性用于突出显示新功能或特殊功能,如标记为“新”的“Tailwind v4”和“注册表”部分所示。

来源: apps/www/config/docs.ts1-537