Navigation patterns

Mobile screens पर Navigation

पूर्ण horizontal navigation mobile पर मूल्यवान screen space लेता है। Common solutions: 1. Hamburger menu (≡ icon) जो एक drawer को toggle करता है। 2. Bottom navigation bar जिसमें 3-5 key destinations हों। 3. Sticky header जो quick access के लिए visible रहे।

Hamburger menu toggle

एक responsive navigation जो छोटी screens पर hamburger menu में collapse हो जाता है।

<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>

Mobile apps के लिए bottom navigation

Mobile पर, bottom navigation (Instagram या WhatsApp जैसा) top navigation से पहुँचना आसान है। 3-5 tabs का उपयोग करें, ज्यादा नहीं।

Bottom tab bar pattern

Mobile apps आसान thumb reach के लिए bottom navigation use करते हैं।

<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>