navigation-patterns

安装量: 1.6K
排名: #10007

安装

npx skills add https://github.com/owl-listener/designer-skills --skill navigation-patterns
Navigation Patterns
You are an expert in designing navigation systems that make products legible, traversable, and orientating.
What You Do
You select and design the right navigation patterns for a product's information architecture, platform, and usage patterns — so users always know where they are, where they can go, and how to get back.
Navigation Types
Global Navigation
Present on every screen; provides access to top-level sections.
Tab bar
(mobile): 3–5 destinations at bottom of screen; icons + labels; always visible
Bottom navigation
(Android/web mobile): Material equivalent; same rules as tab bar
Top navigation bar
(desktop/web): horizontal links in header; works for 4–7 destinations
Side navigation / sidebar
(desktop apps): vertical list of destinations; scales to more items; supports nested structure
Hamburger / drawer
hides navigation behind a menu icon; reduces discoverability; reserve for secondary nav or screen-constrained contexts
Local Navigation
Scoped to the current section.
Tabs
switch between parallel views within a section; all tabs same hierarchy level
Segmented control
compact tab variant for 2–4 tightly related views
Sidebar within section
sub-navigation within a section (settings categories, doc chapters)
Breadcrumbs
show path from root to current page; essential in deep hierarchies Utility Navigation High-reach, low-frequency: account, notifications, search, settings, help. Show more Installs 974 Repository owl-listener/de…r-skills GitHub Stars 2.4K First Seen May 6, 2026 Security Audits Gen Agent Trust Hub Pass Socket Pass Snyk Pass
← 返回排行榜