Interface Lab
Back to knowledge
Interaction Responsive Motion

Navigation Landmarks and Current State

Users need to know where they are, where they can go, and what scope the current page belongs to.

Design Principle

Navigation is not a pile of links; it continuously communicates structure and current location.

Principle

Navigation is not a pile of links; it continuously communicates structure and current location.

Design action

Top nav and sidebar should show current state; list filters, detail return links, and admin entries should share one information architecture.

Examples

Positive example: Multi-page communities, knowledge bases, admin tools, and account areas. Counterexample: The current page has no active marker.

Apply when

Multi-page communities, knowledge bases, admin tools, and account areas. Pages have secondary sections or filter scopes.

Source notes

Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles. Apple HIG Motion: https://developer.apple.com/design/human-interface-guidelines/motion Material Design Motion: https://m3.material.io/styles/motion/overview/how-it-works GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Shopify Polaris Patterns: https://polaris-react.shopify.com/patterns Atlassian Empty State: https://atlassian.design/components/empty-state

Agent Directive

Top nav and sidebar should show current state; list filters, detail return links, and admin entries should share one information architecture.