菜单
Use when choosing or designing primary navigation for a website or app — to select the right structural pattern (top nav, side nav, tabs, bottom nav) for the content depth and device context, and avoid the anti-patterns that account for the majority of navigation usability failures.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/jeffreytse/grimoire-core --skill design-navigation-patterns命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Use when comparing very differently-titled roles for compensation banding, leveling, or organizational design — score each role's inherent Know-How (knowledge, skills, experience required), Problem Solving (complexity and freedom of thinking, scored as a percentage of Know-How), and Accountability (freedom to act and magnitude of impact), because job titles and informal seniority perceptions vary inconsistently across departments and don't provide a comparable basis on their own.
Use when many people request your scarce time, mentorship, or expertise and you cannot evaluate their genuine commitment level from a conversation alone — require a specific, costly, objectively verifiable unit of self-directed output (a set number of completed attempts) before engaging, because genuine commitment is what a conversation cannot reliably reveal but a completed, verifiable body of work can.
Use when deciding how to allocate a manager's or leader's limited time across competing activities — before defaulting to whatever is most urgent, estimate each candidate activity's leverage (how many people's output it affects, for how long, and whether it requires your specific position), because a manager's actual output is the output of the organization under their influence, not their own individual task completion.
基于 SOC 职业分类
正在显示 SKILL.md
| name | design-navigation-patterns |
| description | Use when choosing or designing primary navigation for a website or app — to select the right structural pattern (top nav, side nav, tabs, bottom nav) for the content depth and device context, and avoid the anti-patterns that account for the majority of navigation usability failures. |
| source | NNG "Navigation Design" guidelines (Budiu, 2020); Apple HIG "Tab Bars" and "Navigation Bars"; Google Material Design "Navigation drawer" and "Navigation bar" (2022); Wroblewski "Mobile Navigation Patterns" (LukeW, 2012) |
| tags | ["navigation","information-architecture","mobile-nav","sidebar","tabs","breadcrumbs","wayfinding","ux-patterns"] |
Select the navigation pattern that matches content depth and device context, label it with nouns, mark the active state clearly, and add wayfinding cues when depth exceeds two levels.
Adopted by: Apple HIG specifies tab bars, navigation bars, and sidebars for distinct use cases — not interchangeably; Google Material Design 3 (2022) defines Navigation Bar (mobile), Navigation Drawer (desktop/tablet), and Navigation Rail as distinct patterns with documented triggers; all major design systems (IBM Carbon, Shopify Polaris, Atlassian Design System) encode navigation patterns with platform-specific variants; NNG's Navigation Design guideline is the most-cited UX research authority on navigation structure Impact: NNG (Budiu, 2020) identifies navigation as the #1 usability problem area on websites — more than search, content, or layout; Baymard Institute's mobile navigation research (2021) found that mobile hamburger menus reduce navigation discoverability by 44% compared to persistent tab bars; Nielsen's original Usability Engineering (1993) identifies clear navigation as the strongest predictor of learnability across all digital products Why best: Navigation pattern selection is not an aesthetic choice — it determines how many taps/clicks a user needs to reach any content, whether users can orient themselves within the IA, and whether mobile users can reach navigation with one thumb; the alternative of applying a single pattern universally (e.g., hamburger for all devices) is consistently the highest-impact navigation mistake documented in NNG and Baymard research
Sources: NNG "Navigation Design: Almost Everything You Need to Know" (Budiu, 2020); Apple Human Interface Guidelines "Navigation Bars" + "Tab Bars" (2023); Google Material Design 3 "Navigation" (2022); Baymard Institute "Mobile Navigation UX" (2021)
Count the number of top-level sections and the maximum navigation depth:
| Depth | Top-level items | Recommended pattern |
|---|---|---|
| Shallow (1–2 levels) | 2–5 | Tabs (always visible, equal weight) |
| Medium (2–3 levels) | 3–7 | Top navigation bar (desktop) / Bottom navigation bar (mobile) |
| Deep (3+ levels) | 5–7 | Side navigation / navigation drawer with expand/collapse for sub-sections |
| Very deep (4+ levels) | 7+ | Side nav + breadcrumbs — side nav for primary; breadcrumbs for path |
Tabs (iOS tab bar, web tab group): best when sections are equal in importance and frequently switched. Maximum 5 tabs — beyond that, users cannot perceive tabs as a set.
Top navigation bar: standard for desktop web. Works for 4–8 top-level items. Supports dropdowns for sub-navigation. Does not work on mobile — thumb reach fails.
Bottom navigation bar (Material Navigation Bar, iOS Tab Bar): mobile standard. Maximum 5 items. Items must be destinations, not actions. Thumb-reachable on all phone sizes.
Side navigation / Navigation drawer: works for 7+ sections or when sections have sub-sections that need to be visible simultaneously. On mobile, use a drawer (swipe to open) rather than a persistent sidebar — persistent sidebars consume too much viewport.
Navigation patterns are not device-agnostic:
Mobile:
Desktop web:
Tablet:
Navigation labels must be nouns or noun phrases, not verbs:
❌ "Explore" → ✅ "Browse" or name the category ("Products")
❌ "Manage" → ✅ "Settings" or "Team"
❌ "View reports" → ✅ "Reports" or "Analytics"
❌ "Create" (standalone — where does it navigate to?) → remove; this is an action, not a nav item
Rules for labels:
Active state communicates "you are here." It must be visually unambiguous:
Minimum active state requirements:
- Color change (not just a shade lighter — a distinct accent color)
- Weight change (bold label) OR icon fill change (outline → filled)
- At least 2 of: color, weight, position indicator (underline, dot, highlight)
❌ Active state = slightly darker text → fails for low-vision users; fails blur test
✅ Active state = accent color + filled icon + underline indicator
Always provide active state on page load — users should know where they are before they interact.
When content lives more than 2 levels deep, add breadcrumbs above the page heading:
Home > Products > Laptops > MacBook Pro 14"
Breadcrumb rules:
> or / as separator (both are standard; be consistent)Breadcrumbs reduce navigational backtracking by 25% on sites with 3+ level hierarchies (NNG).
1. Hamburger menu as primary mobile navigation Hidden navigation reduces discoverability by 44%. Use bottom nav bar for ≤ 5 primary destinations.
2. Icon-only bottom navigation without labels Users take 3× longer to learn icon-only navigation vs labeled icons (NNG 2016). Always add text labels.
3. Nav label ≠ page heading "Pricing" in nav → "Plans & Pricing" on page → user questions whether they're in the right place. Exact label match is required.
4. Active state missing or too subtle If users cannot identify where they are in one glance, orientation fails. Active state is not optional.
5. Navigation changes on scroll (hiding/transforming) "Shrinking headers" and navigation that transforms on scroll increases interaction cost. Static navigation is faster for users (Baymard, 2021).
6. Orphan pages — no navigation back Any page reachable via navigation must be navigable back to the previous level. Dead ends require the back button — navigation failure.