skills.rest
flitzrrr
flitzrrrCOMMUNITY
Explore all skills by this author →
𝕏@flitzrrrGitHub

navigation-design

Define website navigation menus, breadcrumbs, search integration, and user flows.

4|1|Updated Apr 4, 2026
Search Tags:#accessibility#navigation#ux-design#breadcrumbs#information-architecture#site-search#menu-patterns
One-click install
npx skills add https://github.com/flitzrrr/frontend-design-skills --skill navigation-design-flitzrrr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: navigation-design
Source: https://github.com/flitzrrr/frontend-design-skills/tree/main/skills-src/navigation-design
Command: npx skills add https://github.com/flitzrrr/frontend-design-skills --skill navigation-design-flitzrrr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps designers and product teams eliminate confusing or inaccessible website navigation by translating information architecture into clear menus, breadcrumbs, and search experiences that orient users and reduce friction.

Core Features & Use Cases

  • Menu pattern selection: guidance on main navigation, mega menus, sidebars, and mobile patterns tailored to site type (e.g., e-commerce, documentation, portfolio).
  • Information architecture alignment: derive navigation from content structure to limit depth, group related links, and place priority items at serial positions.
  • Accessibility and interaction rules: keyboard operability, ARIA roles, focus indicators, touch target sizing, and contrast requirements to ensure inclusive navigation.
  • Use Case: For an e-commerce site with hundreds of categories, use the skill to design a mega menu, implement search with filters, and create breadcrumbs for deep product pages.

Quick Start

Ask the skill to evaluate your site's current navigation and produce a recommended main menu structure, breadcrumb strategy, and search placement.

Frequently Asked Questions about navigation-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design website navigation that is accessible and intuitive?▼

Accessible website navigation requires keyboard operability, ARIA roles, visible focus indicators, and adequate touch target sizing. Aligning your information architecture with clear menu patterns and breadcrumb placement ensures users can orient themselves and reach content effortlessly.

What's the best way to structure breadcrumbs for deep e-commerce product pages?▼

Breadcrumbs for deep e-commerce pages should mirror your information architecture, clearly showing the hierarchical path from the homepage to the specific product. Proper breadcrumb placement and consistent navigation reduce friction and help users understand their location within extensive category structures.

How does information architecture alignment improve menu patterns for web applications?▼

Information architecture alignment improves menu patterns by deriving navigation directly from your content structure. This limits site depth, groups related links logically, places priority items at serial positions, and helps satisfy the 3-click guideline for user flow.

Can I use mega menus and site search for documentation portals with hundreds of categories?▼

Mega menus and site search are highly effective for documentation portals with extensive categories. Tailoring menu patterns to your site type and integrating search with filters allows users to bypass deep hierarchies and locate specific content quickly.

Why does my main navigation fail the 3-click guideline for user flow?▼

Main navigation fails the 3-click guideline when information architecture is misaligned, creating excessive depth. Grouping related links, prioritizing serial positions, and implementing consistent meta nav or footer links flattens the structure and improves user flow.

Do I need ARIA roles and keyboard operability for mobile navigation sidebars?▼

ARIA roles and keyboard operability are required for mobile navigation sidebars to ensure inclusive access. Applying accessibility interaction rules, including appropriate touch target sizing and contrast requirements, guarantees navigation is usable across all devices.

Related Skills

Explore More Design & Creative Skills→
ivanyeorsivanyeors

content-audit

Inventory and assess existing content to produce an IA-ready overview.

Community
Intermediate
serverpodserverpod
8

shadcn_ui-breadcrumb

Generate Flutter breadcrumb navigation code using shadcn_ui widgets.

Official
Basic
aditisharma0204aditisharma0204

flow-designer

Map end-to-end user flows across screens, states, and interactions.

Community
Advanced
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate