Components: Navigation Menu
Guides navigation menu design for SEO, UX, and accessibility. Navigation helps users find content and signals site structure to search engines.
When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
Initial Assessment
Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read it for key pages and audience.
Identify:
- 1. Site structure: Main sections, hierarchy
- Primary goals: Conversion paths, key pages
- Platform: Web, mobile, both
Structure & Organization
Menu Size
- - Primary nav: 7-9 items; avoid overwhelming users
- Sub-navigation: Up to 2 levels; deeper topics in sub-menus
- Pattern: Horizontal top nav or vertical side nav; avoid novel patterns
Hierarchy
- - Reflect sitemap structure; need not match exactly
- Prioritize what visitors need most
- Logical grouping by topic or task
SEO Best Practices
| Practice | Purpose |
|---|
| Semantic HTML | INLINECODE2 , <ul>, <li>; proper landmark roles |
| Descriptive anchor text |
Target keywords; avoid "Click here" |
|
Text links | Prefer text over images; crawlers need readable links |
|
Initial render | All nav HTML in first paint; no JS-only menus for critical links. See
rendering-strategies |
|
Visible links | Prefer visible over hidden; helps crawlers understand structure |
Crawlability
- - Sub-menus: Ensure HTML is in DOM (e.g., CSS-hidden, not JS-injected)
- Footer nav: Include secondary links
- Breadcrumbs: See breadcrumb-generator for implementation
UX Guidelines
Visibility & Location
- - Desktop: Visible nav; avoid hiding behind hamburger when space allows
- Expected placement: Primary nav in header; footer nav at bottom
- Current location: Indicate active page/section in menu
Accessibility
| Requirement | Practice |
|---|
| Labels | Clear, intuitive wording |
| Contrast |
4.5:1 for link text |
|
Touch targets | >=44x44px; adequate spacing |
|
Keyboard | Full keyboard navigation; focus visible |
|
Screen readers | Proper ARIA; skip links for long menus |
Design
- - Simple, clear; avoid covering entire screen with open menus on desktop
- Consistent across pages
- Mobile: Hamburger acceptable; ensure menu is usable when open
Output Format
- - Structure (primary items, sub-items)
- Anchor text suggestions
- HTML/ARIA notes
- SEO checklist
- Accessibility checklist
Related Skills
- - website-structure: Plan structure and nav hierarchy; nav reflects planned sections
- xml-sitemap: Nav should reflect discoverable pages
- internal-links: Nav is primary internal linking
- site-crawlability: Nav affects crawl paths
- category-page-generator: Category hierarchy in nav
- footer-generator: Footer nav complements header nav
- logo-generator: Logo typically sits in header with nav
- breadcrumb-generator: Breadcrumb navigation; BreadcrumbList schema
- rendering-strategies: Nav in first paint; no JS-only menus
组件:导航菜单
指导导航菜单的SEO、用户体验和无障碍设计。导航帮助用户查找内容,并向搜索引擎传达网站结构信号。
调用时:在首次使用时,如有帮助,可先用1-2句话说明此技能涵盖的内容及其重要性,然后提供主要输出。在后续使用或用户要求跳过时,直接进入主要输出。
初步评估
首先检查项目上下文: 如果存在 .claude/project-context.md 或 .cursor/project-context.md,读取其中的关键页面和受众信息。
识别:
- 1. 网站结构:主要板块、层级关系
- 主要目标:转化路径、关键页面
- 平台:网页端、移动端、两者兼有
结构与组织
菜单规模
- - 主导航:7-9个项目;避免让用户感到负担
- 子导航:最多2层;更深层次的内容放在子菜单中
- 模式:水平顶部导航或垂直侧边导航;避免新颖模式
层级关系
- - 反映站点地图结构;无需完全匹配
- 优先考虑访客最需要的内容
- 按主题或任务进行逻辑分组
SEO最佳实践
| 实践 | 目的 |
|---|
| 语义化HTML | <nav>、<ul>、<li>;正确的地标角色 |
| 描述性锚文本 |
定位关键词;避免使用点击这里 |
|
文本链接 | 优先使用文本而非图片;爬虫需要可读的链接 |
|
初始渲染 | 所有导航HTML在首次绘制中呈现;关键链接不使用纯JS菜单。参见
渲染策略 |
|
可见链接 | 优先使用可见链接而非隐藏链接;有助于爬虫理解结构 |
可爬取性
- - 子菜单:确保HTML存在于DOM中(例如,CSS隐藏,而非JS注入)
- 页脚导航:包含次要链接
- 面包屑导航:实现方式参见面包屑生成器
用户体验指南
可见性与位置
- - 桌面端:导航可见;空间允许时避免隐藏在汉堡菜单后
- 预期位置:主导航在页眉;页脚导航在底部
- 当前位置:在菜单中指示当前页面/板块
无障碍性
链接文本4.5:1 |
|
触摸目标 | >=44x44px;间距充足 |
|
键盘 | 完整的键盘导航;焦点可见 |
|
屏幕阅读器 | 正确的ARIA;长菜单使用跳过链接 |
设计
- - 简洁清晰;桌面端避免打开菜单覆盖整个屏幕
- 页面间保持一致
- 移动端:汉堡菜单可接受;确保菜单打开时可用
输出格式
- - 结构(主要项目、子项目)
- 锚文本建议
- HTML/ARIA说明
- SEO检查清单
- 无障碍性检查清单
相关技能
- - 网站结构:规划结构和导航层级;导航反映规划的板块
- XML站点地图:导航应反映可发现的页面
- 内部链接:导航是主要的内部链接方式
- 网站可爬取性:导航影响爬取路径
- 分类页面生成器:导航中的分类层级
- 页脚生成器:页脚导航补充页眉导航
- Logo生成器:Logo通常与导航一起位于页眉
- 面包屑生成器:面包屑导航;BreadcrumbList模式
- 渲染策略:导航在首次绘制中呈现;不使用纯JS菜单