Navigation
Menu structure, labeling, breadcrumbs, and mobile navigation patterns that help users find their way. You'll hit this when users cannot figure out where to go next or lose track of where they are in your site.
Acme
Solutions
Services
Resources
Company
More
Acme
Pricing
Docs
Blog
Changelog
Support
Vague labels like 'Solutions' and 'Resources' force users to click and explore before they can find what they need. These labels sound professional but carry almost no information. Users often give up and leave rather than guess their way through ambiguous menus.
Specific navigation labels like 'Pricing', 'Docs', and 'Blog' tell users exactly what they will find. Users scan navigation quickly and make split-second decisions about where to click. Clear labels reduce cognitive load and eliminate guesswork.
← Back
Configuring Environment Variables
Environment variables let you pass configuration to your app without hardcoding values. This guide covers local development, staging, and production setups.
Docs
/
Deployment
/
Configuration
Configuring Environment Variables
Environment variables let you pass configuration to your app without hardcoding values. This guide covers local development, staging, and production setups.
A simple 'Back' link only moves one step in browser history, which may not even go to the parent page if the user arrived from a search engine. Without breadcrumbs, users on deep pages lose context about how the current content fits into the larger site structure.
Breadcrumbs show the full path from the site root to the current page, giving users a clear sense of where they are in the hierarchy. They also provide one-click access to any parent level, making it easy to navigate laterally without hitting the back button repeatedly.
Shop
Categories ↓
Deals
Electronics ›
Clothing
Home
Phones ›
Laptops
Audio
Android
iOS
Shop
Categories ↓
Deals
Electronics
Phones
Laptops
Audio
Clothing
Men
Women
Kids
Home
Kitchen
Bedroom
Garden
Deeply nested dropdown menus require precise diagonal mouse movements to keep submenus open. A single slip closes the chain, forcing users to start over. Each nesting level also hides content behind an interaction, making it impossible to compare options across categories.
Mega-menus show all options at once in grouped columns, letting users scan everything without precise mouse movements through nested layers. Users can jump directly to any item, and the grouped layout provides its own visual hierarchy without requiring interaction to reveal content.
Acme
Home
Products
Pricing
About
Blog
Contact
Acme
Home
Products
Pricing
About
Blog
Contact
Shrinking a desktop nav bar into a horizontally scrolling row hides links off-screen with no visual cue that more options exist. The small text creates tiny tap targets, and horizontal scrolling conflicts with the vertical scrolling users expect on mobile pages.
A hamburger menu with full-height items gives each link a large, comfortable tap target. Items are grouped vertically with enough spacing to avoid accidental taps. The collapsed state keeps the header clean, while the expanded state dedicates the full screen width to navigation.