Responsive Navigation
Navigation must adapt to small screens. Common patterns include hamburger menus, priority+, and off-canvas drawers.
Ensure touch targets are large enough (at least 44×44 CSS pixels) for mobile usability.
HTML
Intermediate
5 min read
Responsive Navigation Patterns
Example
<!-- Hamburger toggle -->
<nav>
<button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu">
<span class="sr-only">Menu</span>
</button>
<ul id="nav-menu" class="nav-menu">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav> Pro Tip
Use aria-expanded on the toggle button and update it with JavaScript when the menu opens and closes.