SSBM - Single Standard for Burger Menu

Definitions

The SSBM standard defines requirements for the semantics, accessibility, and functionality of burger menu.

Structure and Semantics

The mobile menu must be designed with proper positioning and structure of its elements in mind. To achieve this, position: fixed;, block-size: 100dvb;, and inline-size: 100%; are used so that the menu fills the entire screen, accounting for browser toolbars and toolbars, an overlay a separate element with position: fixed; is used to cover the page and close the menu when clicked.

To animate opening/closing, use offsets via the inset-inline-start, inset-inline-end, inset-block-start, and inset-block-end properties, rather than transform: translateX/Y();. If you simply want the menu to appear or disappear, ensure it does not extend beyond the viewport, especially on small screens:

<button class="burger-button">☰</button>
<div class="menu">
  <div class="menu__overlay"></div>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About Us</a></li>
      <li><a href="/contact">Contact Us</a></li>
    </ul>
  </nav>
</div>

.menu {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: -100%;
  inline-size: 100%;
  block-size: 100dvb;
  background: white;
  transition: inset-inline-start 0.3s;
}

.menu.active {
  inset-inline-start: 0;
}

.menu__overlay {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.menu.active .menu__overlay {
  opacity: 1;
  visibility: visible;
}

Accessibility

The hamburger button should have aria-label and aria-expanded to reflect the menu’s state (open/closed):

<button class="burger-button" aria-label="Open menu" aria-expanded="false">☰</button>

Interactivity and Visual Feedback

The menu closes when the hamburger button is clicked, a menu item is selected, or the overlay is clicked. When the menu is open, overflow: hidden; should be set for <body>, and the page position should be fixed. If smooth transitions are desired, it’s best to animate only inset-inline-start, inset-block-end, inset-inline-end, or inset-block-start for the menu and opacity for the overlay:

const button = document.querySelector('.burger-button');
const menu = document.querySelector('.menu');
const overlay = menu.querySelector('.menu__overlay');

button.addEventListener('click', () => {
  const isActive = menu.classList.toggle('active');

  button.setAttribute('aria-expanded', isActive);
});

overlay.addEventListener('click', () => {
  menu.classList.remove('active');
  button.setAttribute('aria-expanded', 'false');
});