navigation-menu-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

本指南涵盖从SEO、UX和可访问性角度设计导航菜单的相关规范。导航可帮助用户快速查找内容，同时向搜索引擎传递网站结构信息。

调用规则：首次使用时，如果合适，可以先用1-2句话介绍该技能的覆盖范围及价值，再提供核心输出。如果是后续调用，或者用户要求跳过介绍，则直接输出核心内容。

Initial Assessment

初步评估

Check for product marketing context first: If

.claude/product-marketing-context.md

.cursor/product-marketing-context.md

exists, read it for key pages and audience.

Identify:

Site structure: Main sections, hierarchy
Primary goals: Conversion paths, key pages
Platform: Web, mobile, both

首先确认产品营销上下文：如果存在

.claude/product-marketing-context.md

或

.cursor/product-marketing-context.md

文件，请读取其中的核心页面和受众相关信息。

需明确以下信息：

网站结构：核心板块、层级关系
核心目标：转化路径、核心页面
适配平台：Web端、移动端，或两者兼顾

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

主导航：建议设置7-9个选项，避免给用户造成信息过载
子导航：最多设置2级，更深层级的内容放在子菜单中
布局模式：优先使用水平顶部导航或垂直侧边导航，避免采用过于小众的新奇布局

Hierarchy

层级规则

Reflect sitemap structure; need not match exactly
Prioritize what visitors need most
Logical grouping by topic or task

整体反映站点地图结构，无需完全一一对应
优先级向访客最高频的需求倾斜
按主题或任务类型进行逻辑分组

SEO Best Practices

SEO最佳实践

Practice	Purpose
Semantic HTML	`<nav>` , `<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
Visible links	Prefer visible over hidden; helps crawlers understand structure

实践规范	设计目的
语义化HTML	使用 `<nav>` 、 `<ul>` 、 `<li>` 标签；设置正确的地标角色
描述性锚文本	包含目标关键词，避免使用「点击这里」这类无意义表述
文本链接	优先使用文本而非图片链接，爬虫需要可读取的链接内容
首屏渲染	所有导航HTML在首次绘制时完成加载，核心链接不要使用仅JS渲染的菜单
可见链接	优先使用可见链接而非隐藏链接，帮助爬虫更清晰地理解网站结构

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

子菜单：确保HTML存在于DOM中（例如通过CSS隐藏，而非JS动态注入）
底部导航：建议放入次级链接
面包屑：实现方式请参考breadcrumb-generator

UX Guidelines

UX设计指南

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

要求	实践规范
标签表述	清晰、直观的文字描述
对比度	链接文本与背景的对比度不低于4.5:1
触控区域	不小于44x44px，保留足够的点击间距
键盘适配	支持全键盘导航，焦点状态清晰可见
屏幕阅读器适配	正确配置ARIA属性，长菜单提供快速跳转链接

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

导航结构（主导航项、子项层级）
锚文本优化建议
HTML/ARIA实现注意事项
SEO检查清单
可访问性检查清单