Navigation Menu Generator
Design or audit header and mobile navigation so users and search engines understand your site hierarchy without bloating the primary menu.
Overview
Navigation Menu Generator is an agent skill most often used in Launch (also Build frontend) that designs and audits site navigation for SEO, UX, and accessibility.
Install
npx skills add https://github.com/kostja94/marketing-skills --skill navigation-menu-generatorWhat is this skill?
- Initial assessment flow using optional project-context.md for key pages and audience
- Primary nav sizing rule: 7–9 top-level items with sub-navigation up to two levels
- Horizontal top nav or vertical side nav patterns; avoids novel interaction models
- Separates breadcrumbs to breadcrumb-generator for focused IA work
- Covers mega menu, dropdown, mobile, and hamburger menu triggers from the skill description
- 7–9 items recommended for primary navigation
- Sub-navigation limited to up to 2 levels
Adoption & trust: 756 installs on skills.sh; 586 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are restructuring a site or launching pages but the header menu is either too deep, too crowded, or misaligned with what users and search engines need to find first.
Who is it for?
Solo builders refining marketing-site IA before a redesign, migration, or SEO pass where nav labels and depth affect rankings and conversions.
Skip if: Teams that only need breadcrumb markup or trail UX without full primary navigation design—use breadcrumb-generator instead per the skill.
When should I use this skill?
User wants to design, optimize, or audit site navigation menus, or mentions navigation, nav menu, header menu, site structure, menu design, navbar, main menu, mega menu, dropdown menu, mobile menu, or hamburger menu.
What do I get? / Deliverables
You get a structured menu plan with sensible item counts, hierarchy, and pattern choices you can implement in your theme or component library.
- Navigation structure recommendation with item count and depth limits
- Platform-aware menu pattern guidance (web/mobile)
- Audit notes aligned to SEO and UX goals
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Launch because the skill optimizes menus for SEO structure, crawl clarity, and conversion paths—not just visual layout. SEO subphase fits menu sizing, hierarchy mirroring the sitemap, and structural signals called out in the guide.
Where it fits
Shape a minimal top nav for a pre-launch landing page so only pricing, product, and signup stay visible.
Translate approved menu labels into React or static-site header components with two-level dropdowns.
Rebalance nav items so money pages and topical hubs match the sitemap you submit to search consoles.
Add a blog or docs section without pushing primary nav past the recommended seven-to-nine item ceiling.
How it compares
Use instead of guessing nav labels in a one-off chat thread when you want explicit SEO and UX menu rules in one checklist.
Common Questions / FAQ
Who is navigation-menu-generator for?
Indie founders, marketers, and devs shipping content or SaaS sites who want agent-guided navigation structure tied to SEO and accessibility—not just pretty headers.
When should I use navigation-menu-generator?
At Launch when tuning site structure for SEO; during Build frontend when implementing navbar, mega menu, or mobile hamburger patterns; and whenever you mention navigation, nav menu, or site structure in the agent.
Is navigation-menu-generator safe to install?
It is documentation-style guidance with no required shell or network calls in SKILL.md; review the Security Audits panel on this Prism page before installing any skill from the repo.
SKILL.md
READMESKILL.md - 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-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