Syllabus

On this page

Responsive Navigation Pattern

Badar KhalilUpdated September 30, 2026 12 min read

Focus keyword: responsive navigation. Navigation is the part of a website that must work for everyone: on a small phone with a thumb, on a desktop with a mouse, with a keyboard and with a screen reader. In this lesson you will learn the common responsive navigation patterns, how to build a mobile-first menu with a hamburger button, how to make it accessible with aria-expanded and keyboard support, how to build an off-canvas drawer and a dropdown submenu, and how to avoid the mistakes that make menus unusable.

responsive navigation menu, hamburger menu CSS, mobile-first navbar, aria-expanded aria-controls, accessible menu button, disclosure navigation pattern, off-canvas menu, slide-in drawer, dropdown menu focus-within, bottom navigation bar, sticky header, priority plus navigation, skip link, Escape key close menu, focus management, details summary menu, popover attribute, prefers-reduced-motion, touch target 44px, aria-current page.

Inline links that wrap: the simplest choice for sites with only a few links. Use flexbox with flex-wrap: wrap and gap.
Hamburger (toggle) menu: links are hidden behind a Menu button on small screens and shown as a row on large screens. The most common pattern.
Off-canvas drawer: the menu slides in from the side over a dimmed overlay.
Bottom tab bar: three to five main destinations fixed at the bottom of a phone, which is easy to reach with a thumb. Good for app-like sites.
Priority plus: show as many links as fit and move the rest to a More menu. It needs JavaScript or container queries.
Mega menu: large panels with many links on desktop. Convert it to an accordion on mobile.

Choose the simplest pattern that fits your number of links. Hiding navigation behind a button reduces discoverability, so do not use a hamburger on desktop where there is room.

2. Semantic HTML First

Wrap the main links in <nav aria-label='Main'>. Give each nav landmark a different label when a page has more than one.
Use a list: ul with li and a. Screen readers announce the number of items.
Mark the current page with aria-current='page' and style it with [aria-current='page'].
Add a skip link at the start of the page so keyboard users can jump to the main content.
Use real links for navigation and real buttons for actions like opening a menu. Never use a div as the menu button.

Write the small screen version as the base: the menu is hidden and the button is visible. At the breakpoint, hide the button and show the menu as a row.

The button needs a visible text label or an aria-label. An icon alone is not enough for assistive technology.
Add aria-expanded='false' and aria-controls='menu-id'. JavaScript switches aria-expanded between false and true.
Hide the menu with display: none (or visibility: hidden or the hidden attribute) so hidden links are not reachable with the keyboard or screen readers.
Use the disclosure pattern, which is a button that shows and hides content. Avoid role='menu', role='menuitem' and aria-haspopup for site navigation. Those roles are for application menus and require complex keyboard handling.

4. Keyboard and Focus Behavior

The button must work with Enter and Space. A native button does this for free.
Pressing Escape should close the open menu and return focus to the button.
In an off-canvas drawer, move focus to the first link when opened and return it to the button when closed. A fully modal drawer should trap focus inside, and the page behind it should be inert.
Use :focus-visible for a clear focus ring and never remove it without a replacement.
Close the menu when a link is clicked in a single page site, and when the viewport grows to the desktop breakpoint.

5. Off-Canvas Drawer

Position the drawer with position: fixed, move it out of view with transform: translateX(-100%) and bring it in by removing the transform. Use visibility: hidden when closed and transition visibility together with transform, so a closed drawer is not focusable. Add an overlay element that closes the menu when clicked. Lock page scrolling with overflow: hidden on the body while open. Respect prefers-reduced-motion by removing the transition. The native <dialog> element with showModal() gives focus trapping, the Escape key and an inert background for free, and the popover attribute offers light-dismiss behavior for simpler menus.

Hover only is not enough. Open the submenu on :hover and on :focus-within so keyboard users can use it, and provide a button with aria-expanded for touch screens.
A simple no-JavaScript option is details and summary, which is keyboard accessible by default.
Make sure there is no gap between the parent and the submenu so the pointer does not lose hover while moving.
Do not build deep multi-level flyouts. Two levels are the maximum for usability.
Wrap hover effects in @media (hover: hover).

7. Bottom Tab Bar

Fix the bar to the bottom on small screens and add padding-bottom: env(safe-area-inset-bottom) with viewport-fit=cover so gesture bars do not cover it. Use three to five items with an icon and a short label. Add bottom padding to the page so the bar does not cover the last content. At the desktop breakpoint, change it to a normal top navigation with position: static.

A sticky header uses position: sticky; top: 0 with a z-index from your scale. Keep it short on small screens because it uses valuable space. Combine it with scroll-margin-top on headings so anchor links do not hide under it. Make sure the header never covers the focused element, which WCAG 2.2 calls focus not obscured.

9. Touch Target Size and Spacing

Links and buttons in the navigation should be at least 44 CSS pixels tall on touch screens, with enough space between them. Use padding on the link instead of margin around it, so the whole area is clickable.

Use only the keyboard: Tab, Shift+Tab, Enter, Space and Escape.
Zoom to 200 percent and 400 percent. The menu must still be reachable.
Test with a screen reader and check that the button state is announced as expanded or collapsed.
Test on a real phone with one hand.
Test at in-between widths, not only at phone and desktop sizes.
Test with reduced motion enabled.

11. Common Mistakes

Using a div or span as the menu button.
Forgetting aria-expanded, or forgetting to update it.
Hiding the menu only visually, for example with opacity 0 or off-screen positioning, so hidden links still receive focus.
Hover-only dropdowns that cannot be opened with keyboard or touch.
Using role='menu' for ordinary site navigation.
No Escape key support and no focus return.
Transitioning display none, which cannot animate. Animate transform and opacity and toggle visibility.
Hamburger menus on desktop when all links fit.
Removing the focus outline.
Tiny tap targets placed very close together.

Key Takeaways

Start with semantic nav markup, write the small screen version first, use a real button with aria-expanded and aria-controls for the toggle, hide closed menus from the keyboard, support Escape and focus return, never rely on hover alone, keep touch targets large, and switch to a simple inline row when there is enough space.

Try it Yourself HTML

<style>
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font: 16px system-ui, sans-serif; }
  .nav { background: #264653; padding: 10px 16px; }
  .nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
  .nav a { color: #fff; text-decoration: none; display: inline-block; padding: 12px 14px; min-height: 44px; border-radius: 8px; }
  .nav a:hover, .nav a:focus-visible { background: rgba(255,255,255,.18); }
  .nav a:focus-visible { outline: 3px solid #ffb703; }
  .nav a[aria-current='page'] { background: #e9c46a; color: #111; }
  .nav .push { margin-left: auto; }
</style>
<nav class='nav' aria-label='Main'>
  <ul>
    <li><a href='#' aria-current='page'>Home</a></li>
    <li><a href='#'>Courses</a></li>
    <li><a href='#'>Blog</a></li>
    <li class='push'><a href='#'>Sign in</a></li>
  </ul>
</nav>
<p style='padding:16px'>Simplest pattern: flex-wrap handles small screens when there are only a few links.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font: 16px system-ui, sans-serif; }
  .site { background: #264653; color: #fff; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .logo { font-weight: 800; font-size: 20px; }
  .menu-btn { background: transparent; color: #fff; border: 2px solid #fff; border-radius: 8px; padding: 8px 14px; min-height: 44px; font: inherit; cursor: pointer; }
  .menu { display: none; width: 100%; }
  .menu[data-open='true'] { display: block; }
  .menu ul { list-style: none; margin: 8px 0 0; padding: 0; }
  .menu a { display: block; color: #fff; text-decoration: none; padding: 12px 8px; min-height: 44px; border-top: 1px solid rgba(255,255,255,.2); }
  .menu a:focus-visible, .menu-btn:focus-visible { outline: 3px solid #ffb703; outline-offset: 2px; }
  @media (min-width: 768px) {
    .menu-btn { display: none; }
    .menu { display: block; width: auto; }
    .menu ul { display: flex; gap: 4px; margin: 0; }
    .menu a { border: 0; border-radius: 8px; padding: 10px 14px; }
    .menu a:hover { background: rgba(255,255,255,.18); }
  }
</style>
<header class='site'>
  <a class='logo' href='#' style='color:#fff;text-decoration:none'>Brand</a>
  <button class='menu-btn' aria-expanded='false' aria-controls='menu'>Menu</button>
  <nav id='menu' class='menu' aria-label='Main' data-open='false'>
    <ul><li><a href='#' aria-current='page'>Home</a></li><li><a href='#'>Courses</a></li><li><a href='#'>Blog</a></li><li><a href='#'>Contact</a></li></ul>
  </nav>
</header>
<p style='padding:16px'>Narrow the preview below 768px to see the Menu button.</p>
<script>
  var btn = document.querySelector('.menu-btn');
  var menu = document.getElementById('menu');
  function setOpen(open) {
    btn.setAttribute('aria-expanded', String(open));
    menu.setAttribute('data-open', String(open));
  }
  btn.addEventListener('click', function () { setOpen(btn.getAttribute('aria-expanded') !== 'true'); });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') { setOpen(false); btn.focus(); }
  });
</script>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font: 16px system-ui, sans-serif; }
  body.locked { overflow: hidden; }
  header { background: #264653; padding: 8px 16px; }
  .open-btn { background: #e9c46a; border: 0; border-radius: 8px; padding: 10px 16px; min-height: 44px; font: inherit; cursor: pointer; }
  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 200; }
  .overlay.open { opacity: 1; pointer-events: auto; }
  .drawer { position: fixed; inset: 0 auto 0 0; width: min(80vw, 300px); background: #1b2d36; color: #fff; padding: 16px; z-index: 300; transform: translateX(-100%); visibility: hidden; transition: transform .25s, visibility .25s; }
  .drawer.open { transform: none; visibility: visible; }
  .drawer ul { list-style: none; margin: 16px 0 0; padding: 0; }
  .drawer a { display: block; color: #fff; text-decoration: none; padding: 12px 8px; min-height: 44px; border-bottom: 1px solid rgba(255,255,255,.15); }
  .drawer a:focus-visible, .close:focus-visible { outline: 3px solid #ffb703; }
  .close { background: none; border: 2px solid #fff; color: #fff; border-radius: 8px; padding: 6px 12px; min-height: 40px; cursor: pointer; font: inherit; }
  @media (prefers-reduced-motion: reduce) { .overlay, .drawer { transition: none; } }
</style>
<header><button class='open-btn' id='open' aria-expanded='false' aria-controls='drawer'>Open menu</button></header>
<div class='overlay' id='overlay'></div>
<nav class='drawer' id='drawer' aria-label='Main'>
  <button class='close' id='close'>Close</button>
  <ul><li><a href='#'>Home</a></li><li><a href='#'>Courses</a></li><li><a href='#'>Blog</a></li><li><a href='#'>Contact</a></li></ul>
</nav>
<main style='padding:16px'>Page content. Open the drawer, press Escape or click the overlay to close it.</main>
<script>
  var openBtn = document.getElementById('open');
  var drawer = document.getElementById('drawer');
  var overlay = document.getElementById('overlay');
  function openDrawer() {
    drawer.classList.add('open'); overlay.classList.add('open');
    document.body.classList.add('locked'); openBtn.setAttribute('aria-expanded', 'true');
    drawer.querySelector('a').focus();
  }
  function closeDrawer() {
    drawer.classList.remove('open'); overlay.classList.remove('open');
    document.body.classList.remove('locked'); openBtn.setAttribute('aria-expanded', 'false');
    openBtn.focus();
  }
  openBtn.addEventListener('click', openDrawer);
  document.getElementById('close').addEventListener('click', closeDrawer);
  overlay.addEventListener('click', closeDrawer);
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && drawer.classList.contains('open')) { closeDrawer(); } });
</script>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font: 16px system-ui, sans-serif; }
  .nav { background: #264653; padding: 8px 16px; display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
  .nav > a, .nav summary { color: #fff; padding: 12px 14px; min-height: 44px; text-decoration: none; border-radius: 8px; cursor: pointer; display: block; list-style: none; }
  .nav summary::-webkit-details-marker { display: none; }
  .nav summary::after { content: ' \25BE'; }
  .nav a:hover, .nav summary:hover, .nav summary:focus-visible, .nav a:focus-visible { background: rgba(255,255,255,.18); outline: none; }
  .nav details { position: relative; }
  .nav details ul { position: absolute; top: 100%; left: 0; min-width: 180px; margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 10; }
  .nav details ul a { color: #1b1b1f; display: block; padding: 10px 12px; min-height: 44px; text-decoration: none; border-radius: 6px; }
  .nav details ul a:hover, .nav details ul a:focus-visible { background: #eef2f7; }
</style>
<nav class='nav' aria-label='Main'>
  <a href='#'>Home</a>
  <details>
    <summary>Courses</summary>
    <ul><li><a href='#'>HTML</a></li><li><a href='#'>CSS</a></li><li><a href='#'>JavaScript</a></li></ul>
  </details>
  <a href='#'>Blog</a>
</nav>
<p style='padding:16px'>details and summary give a keyboard accessible dropdown with no JavaScript. Use Tab, Enter and Space.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font: 16px system-ui, sans-serif; min-height: 240px; }
  .nav { background: #264653; padding: 8px 16px; display: flex; gap: 8px; }
  .has-sub { position: relative; }
  .has-sub > button, .nav > a { color: #fff; background: transparent; border: 0; font: inherit; padding: 12px 14px; min-height: 44px; border-radius: 8px; cursor: pointer; text-decoration: none; display: block; }
  .has-sub > button:focus-visible, .nav a:focus-visible { outline: 3px solid #ffb703; }
  .sub { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; padding: 6px; margin: 0; list-style: none; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  .sub a { display: block; color: #1b1b1f; text-decoration: none; padding: 10px 12px; min-height: 44px; border-radius: 6px; }
  .sub a:hover, .sub a:focus-visible { background: #eef2f7; }
  .has-sub.open .sub { display: block; }
  @media (hover: hover) {
    .has-sub:hover .sub { display: block; }
  }
  .has-sub:focus-within .sub { display: block; }
</style>
<nav class='nav' aria-label='Main'>
  <a href='#'>Home</a>
  <div class='has-sub'>
    <button aria-expanded='false' aria-controls='sub1'>Products</button>
    <ul class='sub' id='sub1'><li><a href='#'>Laptops</a></li><li><a href='#'>Phones</a></li><li><a href='#'>Accessories</a></li></ul>
  </div>
  <a href='#'>Support</a>
</nav>
<p style='padding:16px'>The submenu opens with hover, keyboard focus and a click or tap on the button.</p>
<script>
  var item = document.querySelector('.has-sub');
  var trigger = item.querySelector('button');
  trigger.addEventListener('click', function () {
    var open = item.classList.toggle('open');
    trigger.setAttribute('aria-expanded', String(open));
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') { item.classList.remove('open'); trigger.setAttribute('aria-expanded', 'false'); trigger.focus(); }
  });
</script>

Output

Press Run to execute.

Try it Yourself HTML

<meta name='viewport' content='width=device-width, initial-scale=1, viewport-fit=cover'>
<style>
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; font: 16px system-ui, sans-serif; padding-bottom: 88px; }
  .tabs { position: fixed; inset: auto 0 0 0; display: flex; justify-content: space-around; background: #264653; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 100; }
  .tabs a { flex: 1; color: #fff; text-decoration: none; text-align: center; padding: 8px 4px; min-height: 52px; border-radius: 10px; display: grid; gap: 2px; align-content: center; font-size: 13px; }
  .tabs a span { font-size: 20px; line-height: 1; }
  .tabs a[aria-current='page'] { background: #e9c46a; color: #111; }
  .tabs a:focus-visible { outline: 3px solid #ffb703; }
  @media (min-width: 768px) {
    body { padding-bottom: 0; }
    .tabs { position: static; justify-content: flex-start; gap: 6px; padding: 8px 16px; }
    .tabs a { flex: 0 0 auto; grid-auto-flow: column; gap: 8px; font-size: 16px; padding: 8px 16px; min-height: 44px; }
  }
</style>
<main style='padding:16px'><h2>Bottom tab bar</h2><p>Below 768px the bar is fixed at the bottom for thumb reach. From 768px it becomes a normal top navigation.</p></main>
<nav class='tabs' aria-label='Main'>
  <a href='#' aria-current='page'><span>&#8962;</span>Home</a>
  <a href='#'><span>&#9906;</span>Search</a>
  <a href='#'><span>&#9829;</span>Saved</a>
  <a href='#'><span>&#9786;</span>Profile</a>
</nav>

Output

Press Run to execute.

Try it Yourself JAVASCRIPT

var state = { open: false };

function toggle() {
  state.open = !state.open;
  return {
    ariaExpanded: String(state.open),
    menuHidden: !state.open,
    focusTarget: state.open ? 'first link in the menu (drawer) or stay on button' : 'menu button'
  };
}

function pressEscape() {
  if (!state.open) { return 'Nothing to close'; }
  state.open = false;
  return 'Menu closed, focus returned to the menu button';
}

console.log('Click 1:', JSON.stringify(toggle()));
console.log('Escape:', pressEscape());
console.log('Click 2:', JSON.stringify(toggle()));
console.log('Click 3:', JSON.stringify(toggle()));

var wide = window.matchMedia('(min-width: 768px)');
console.log('Desktop layout active: ' + wide.matches + ' (reset the menu state when this changes)');

Output

Press Run to execute.

Exercise: Make a Navigation Responsive with a Menu ButtonHTML

Turn the inline navigation into a mobile-first responsive menu. Below 768px show a Menu button with aria-expanded and aria-controls and hide the links. From 768px hide the button and show the links in a row. Use a data attribute or a class to open the menu, and write the small screen styles as the base.

Try it Yourself HTML

<style>
  nav { background: #264653; padding: 10px; }
  nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
  nav a { color: #fff; text-decoration: none; padding: 10px; display: block; }
</style>
<nav aria-label='Main'>
  <ul><li><a href='#'>Home</a></li><li><a href='#'>About</a></li><li><a href='#'>Contact</a></li></ul>
</nav>

Output

Press Run to execute.

Show expected output

A button with aria-expanded and aria-controls, menu hidden by default, toggled by JavaScript, and a @media (min-width: 768px) rule that hides the button and displays the links as a row

This is a self-check — compare your result with the expected output above.

Exercise: Add Escape Key and Focus ReturnHTML

The menu button toggles the menu, but it is missing keyboard support. Add code so that pressing Escape closes the open menu, updates aria-expanded to false and returns focus to the button. Also make sure the hidden menu cannot be reached with the Tab key.

Try it Yourself HTML

<style>
  .menu { display: none; }
  .menu.open { display: block; }
</style>
<button id='btn' aria-expanded='false' aria-controls='menu'>Menu</button>
<nav id='menu' class='menu' aria-label='Main'><ul><li><a href='#'>Home</a></li><li><a href='#'>Docs</a></li></ul></nav>
<script>
  var btn = document.getElementById('btn');
  var menu = document.getElementById('menu');
  btn.addEventListener('click', function () {
    var open = menu.classList.toggle('open');
    btn.setAttribute('aria-expanded', String(open));
  });
</script>

Output

Press Run to execute.

Show expected output

A keydown listener that checks for Escape, removes the open class, sets aria-expanded to false and calls btn.focus(), while the closed menu uses display: none so links are not focusable

This is a self-check — compare your result with the expected output above.

Was this page helpful?

Responsive Navigation Pattern