Navigation patterns

Navigation on mobile screens

Full horizontal navigation takes up precious screen space on mobile. Common solutions: 1. Hamburger menu (≡ icon) that toggles a drawer. 2. Bottom navigation bar with 3-5 key destinations. 3. Sticky header that stays visible for quick access.

Hamburger menu toggle

A responsive navigation that collapses into a hamburger menu on smaller screens.

<header>
  <button class="menu-toggle">☰</button>
  <nav class="menu">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<style>
  .menu { display: flex; gap: 20px; }
  
  @media (max-width: 600px) {
    .menu { display: none; position: absolute; flex-direction: column; }
    .menu.active { display: flex; }
    .menu-toggle { display: block; }
  }
</style>

Bottom navigation for mobile apps

On mobile, bottom navigation (like Instagram or WhatsApp) is easier to reach than top navigation. Use 3-5 tabs, no more.

Bottom tab bar pattern

Mobile apps use bottom navigation for easy thumb reach.

<nav class="bottom-nav">
  <a href="#home" class="active">Home</a>
  <a href="#search">Search</a>
  <a href="#profile">Profile</a>
</nav>

<style>
  .bottom-nav { position: fixed; bottom: 0; display: flex; width: 100%; gap: 0; }
  .bottom-nav a { flex: 1; padding: 16px; text-align: center; }
</style>