--- name: navigation-menu-generator description: When the user wants to design, optimize, or audit site navigation menus. Also use when the user mentions "navigation," "nav menu," "header menu," "site structure," "menu design," "navbar," "main menu," "mega menu," "dropdown menu," "mobile menu," or "hamburger menu." For breadcrumbs, use breadcrumb-generator. metadata: version: 1.0.1 --- # 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** | `