Navigation Patternsby Owl-Listener

Navigation Patterns Skill.

Turn an information hierarchy into recognizable navigation controls and clear paths between destinations.

Interaction Design
Navigation

Source Review · Navigation PatternsSKILL.md

Task Interaction Design Produces • A recommended navigation pattern with a task-based rationale. • Global, local, utility, and contextual navigation assignments. • Active, hover, focus, disabled, and badge-state requirements. Before You Start Needs an information hierarchy and task priorities; no navigation component package is provided.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Choose How Users Move Through a Product

A navigation-selection guide spanning global and local patterns, orientation cues, platform conventions, and state design.

Source-based workflowNot an execution benchmark

The Working Approach

Navigation Patterns selects the interface that exposes a product's structure: mobile tabs, desktop sidebars, top navigation, breadcrumbs, contextual links, or a drawer. It keeps global, local, and utility navigation distinct so destinations at different levels do not compete inside the same control.

The source emphasizes orientation as much as movement. A user needs to know the current location, predict where a label leads, and find a path back. Active states must remain recognizable beyond color, and the pattern should fit the platform and frequency of use rather than merely save screen space.

Expected Deliverables

A recommended navigation pattern with a task-based rationale.
Global, local, utility, and contextual navigation assignments.
Active, hover, focus, disabled, and badge-state requirements.

See the Example Brief

From Brief to Review

01
Read the Structure
Identify primary destinations, nested sections, and occasional utilities from the existing information architecture.
02
Match Pattern to Context
Consider platform, destination count, hierarchy depth, and mobile reach before choosing controls.
03
Check Orientation
Specify current-location cues and test labels and cross-section tasks with representative users.

02 When to Use It

When to Use It

Needs an information hierarchy and task priorities; no navigation component package is provided.

A Good Fit

Choosing Between Tabs and DrawersUseful when navigation options have different visibility and reachability trade-offs.
Deep Product StructuresHelps combine breadcrumbs and local navigation without mixing hierarchy levels.

Limits to Check

Not an IA ReplacementUnclear categories and labels may require restructuring before any control can work well.
No Automatic Usability ProofPattern recommendations need first-click or task-based validation.

Bring These Inputs

Destination HierarchyProvide the established sections and their parent-child relationships.
Usage PrioritiesIdentify frequent tasks, cross-section movement, and utility destinations.
PlatformsDescribe desktop and mobile constraints, conventions, and accessibility requirements.

03 Decisions That Matter

Decisions That Matter

Visibility Has a Cost
Hiding navigation may simplify the layout while making important destinations harder to discover.
State Beyond Color
Weight, underlines, or indicators can make the current location perceivable without relying on hue alone.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the repository's documented installation route and retain any referenced companion files. This entry describes a focused design method rather than an executable application.

Upstream Source File

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/navigation-patterns/SKILL.md

Needs an information hierarchy and task priorities; no navigation component package is provided.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use navigation-patterns for a desktop analytics app with six primary sections, nested report folders, and mobile access. Compare a sidebar with top navigation, separate utilities, and specify breadcrumbs and active/focus states. Explain which IA questions must be resolved before implementation.

Inspect the Result

Check the actual output against these observable criteria.

Global and local levels are not mixed accidentally.
The current destination is indicated by more than color.
Cross-section tasks have a discoverable route and return path.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill File: interaction-design/skills/navigation-patterns/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 9a6930cf84a8

Editorial Source Summary

A navigation-selection guide spanning global and local patterns, orientation cues, platform conventions, and state design.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Should mobile navigation always use a drawer?

No. The source favors visible tabs for a small set of primary destinations and treats drawers as a trade-off in discoverability.

When are breadcrumbs useful?

They help explain location and ancestry in deeper content hierarchies, often alongside local navigation.

Can it fix unfamiliar section names?

It can flag them and recommend label testing, but underlying categories may need information-architecture work.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills