UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Interaction Responsive Motion

Responsive Navigation Collapse

Responsive Navigation Collapse turns a frequent interface judgment into an executable constraint before generation.

responsivenavigationmobile

Design Principle

Collapsing navigation is not hiding every entry; it reorders by task frequency and current location.

Principle Collapsing navigation is not hiding every entry; it reorders by task frequency and current location.

Design action Keep global navigation on desktop, compress secondary entries on tablet, and preserve current task, back, search, and primary action on mobile.

Examples Positive example: SaaS, knowledge bases, libraries, admin tools, and ecommerce need cross-page movement. Counterexample: Mobile leaves only a hamburger menu and loses the primary action.

Apply when SaaS, knowledge bases, libraries, admin tools, and ecommerce need cross-page movement. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles.

Agent Directive

Keep global navigation on desktop, compress secondary entries on tablet, and preserve current task, back, search, and primary action on mobile.

Apply When

  • SaaS, knowledge bases, libraries, admin tools, and ecommerce need cross-page movement.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Mobile leaves only a hamburger menu and loses the primary action.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Interaction Responsive Motion
Quality
85%
Version
v1
Published
6/6/2026