导航架构(Navigation Architecture)是针对无头 CMS 架构设计菜单系统、面包屑和导航 API 的指导性技能。
适用场景:设计主导航/次级导航、实现面包屑路径、构建超级菜单(mega-menu)结构、创建移动端导航模式、设计导航 API。
菜单类型方面,资料给出主导航的 C# 数据模型:Menu 类包含 Id、Name、Slug、Location 和 Items;MenuItem 包含标签、链接目标(PageId、ExternalUrl 或 Anchor 之一)、计算出的 Url、层级字段(ParentId、Children、Order)以及展示选项(OpenInNewTab、Icon、CssClass)。MenuLocation 枚举覆盖 Primary、Secondary、Footer、Sidebar、Utility、Mobile。超级菜单使用 MegaMenuItem,包含 IsMegaMenu、Columns、FeaturedContentId、FeaturedImageUrl、Description 及 MenuColumn 分组;页脚导航使用 FooterMenu,包含 FooterSection、LegalLinks 和 SocialLink。
面包屑部分提供 BreadcrumbService,从首页开始沿页面层级向上获取祖先页并追加当前页(无链接,IsCurrent 为 true);Breadcrumb 包含 Label、Url、IsCurrent。还提供 BreadcrumbSchemaGenerator,用于生成 schema.org 的 BreadcrumbList JSON-LD 结构化数据,以支持 SEO。
动态与静态导航方面,DynamicMenuService 可从已发布页面按 ParentId、ShowInNavigation、Order 递归生成菜单(可设 maxDepth、publishedOnly);StaticMenuService 则按 slug 从菜单仓库读取 CMS 管理的菜单,并为关联页面的菜单项解析 URL。
导航 API 部分列出 REST 端点:GET /api/menus、GET /api/menus/{slug}、GET /api/menus/location/{location}、GET /api/breadcrumbs?path=/about,并给出菜单响应和面包屑响应(含 jsonLd)的 JSON 示例。
移动端导航提供 MobileMenuConfig(UseHamburger、HamburgerStyle、MaxVisibleItems、ShowSearch),HamburgerStyle 枚举包含 SlideIn、Overlay、Dropdown。响应式策略按断点划分:桌面端(>1024px)完整水平菜单加下拉;平板(768–1024px)精简菜单、超级菜单折叠;移动端(<768px)汉堡菜单、手风琴式子菜单。
最佳实践包括:主导航限制为 5–7 项、使用清晰且面向动作的标签、保持层级较浅(最多 2–3 级)、高亮当前页面/分区、保证菜单可键盘访问;避免深层嵌套、模糊标签(如 More、Misc)、将重要页面藏在子菜单中、忽略移动端用户。性能方面建议缓存菜单(示例 CachedMenuService 使用内存缓存 30 分钟)。相关技能包括 page-structure-design、url-routing-patterns、headless-api-design。
限制:以上内容为技能文档所提供的数据模型、端点与示例代码,未说明具体平台依赖、收费或价格信息。