navigation-menu-generator

# 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 2. **Primary goals**: Conversion paths, key pages 3. **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** | `<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. See **rendering-str...