Navigation and the mobile menu: patterns

In short

Navigation answers two questions: where am I and where can I go. The main menu has up to seven sections named in the visitor’s words — “Kitchens” and “Prices”, not “Solutions” and “Ecosystem” — and the current section is marked. On a phone the main sections stay in view: in a bottom tab bar, in a row under the header or at least behind a clearly visible menu button, which opens a menu with large rows, search at the top and contacts at the bottom. The header steps aside while the person reads and comes back as soon as they scroll up. Breadcrumbs show the path in a deep catalogue, and on a phone they shrink to one step back.

Sections named in the visitor’s words

The same kitchen studio. In the first menu you have to guess where the kitchens are, in the second — just read.

People come with their own words: “kitchen”, “price”, “delivery”. The menu that uses them is understood at a glance; the menu that uses the company’s words makes people open every section. The current section is marked not only by colour but by shape or weight — and in the code by aria-current, so screen readers say it too.

Three ways to fit a menu on a phone

The burger hides everything at once. The other two keep the main sections where the eye and the thumb are.

All in the burger

sections are hidden from view

Bottom tab bar

4–5 frequent sections under the thumb

Main items + “More”

the two key sections stay in view

Which pattern to choose

The choice depends on how many sections there are and how often people switch between them.

Pattern	When it fits	Weak spot
Burger	many sections, each visited rarely	nothing is visible, sections are not discovered
Bottom tab bar	4–5 sections people switch between often: shops, personal accounts	no room for a sixth item
Main items + “More”	two or three key sections and many minor ones	someone has to decide what is main
A row of tabs	catalogue categories of equal weight	items off screen — the cut edge must show there is more

What an open mobile menu needs

The menu is opened to go somewhere quickly. Everything that helps — closer to the thumb, everything else — away.

1the close button where the burger was — the finger is already there
2search first: people look for it most
3rows of 48 px or more, the current section marked
4phone and messenger at the bottom, under the thumb

A header that steps aside

On a phone a fixed header can take a fifth of the screen. It hides while the person reads and comes back on the first movement up.

01 Top of the page

the full header

02 Scrolling down

the header leaves — the screen is for reading

03 Scrolling up

the header comes back, slimmer

Scrolling up is a sign that the person is looking for something — that is when the menu is needed. The returning header is slimmer: logo, menu button and the main action, without the second row.

Breadcrumbs: the way back

In a catalogue with three or more levels, the path shows where the product is and lets you go up a level in one tap.

On a phone the full path wraps into several lines and pushes the title down. One link to the parent section does the same job in one line. In the code the full path stays — search engines show it in results.

Navigation in code: 3 examples

A header with a skip link and the current page marked, styles for a phone and a desktop, and a small script for the menu button and the hiding header.

Header markup

The menu button says whether the menu is open; the current page is marked with aria-current.

header.html

<a class="skip-link" href="#main">Skip to content</a>

<header class="header">
  <a class="header__logo" href="/">Forma</a>

  <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="site-menu">
    <span class="visually-hidden">Menu</span>
    <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
      <path d="M4 7h16M4 12h16M4 17h16" fill="none" stroke="currentColor" stroke-width="2"/>
    </svg>
  </button>

  <nav class="header__nav" id="site-menu" aria-label="Main">
    <ul>
      <li><a href="/kitchens" aria-current="page">Kitchens</a></li>
      <li><a href="/wardrobes">Wardrobes</a></li>
      <li><a href="/prices">Prices</a></li>
      <li><a href="/measuring">Measuring</a></li>
      <li><a href="/contacts">Contacts</a></li>
    </ul>
  </nav>
</header>

<main id="main">…</main>

Phone and desktop

The menu opens by the state of the button; on a desktop the button is not needed.

header.css

.skip-link { position: absolute; left: var(--space-3); top: -3rem; }
.skip-link:focus { top: var(--space-3); }

.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface);
  transition: transform var(--duration-base);
}

.header.is-hidden { transform: translateY(-100%); }

/* The current page is marked not only by colour */
.header__nav [aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.4em;
}

/* Phone: the menu opens under the header, rows of 48px */
@media (max-width: 47.99rem) {
  .header__nav { display: none; flex-basis: 100%; }
  .menu-toggle[aria-expanded="true"] + .header__nav { display: block; }
  .header__nav a { display: flex; align-items: center; min-height: 3rem; }
}

/* Desktop: the menu is always visible */
@media (min-width: 48rem) {
  .menu-toggle { display: none; }
  .header__nav ul { display: flex; gap: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .header { transition: none; }
}

The button and the hiding header

The button switches aria-expanded, Escape closes the menu, the header leaves on the way down.

header.js

const toggle = document.querySelector('.menu-toggle');
const header = document.querySelector('.header');
const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';

// The menu button opens and closes the menu and tells screen readers its state
toggle.addEventListener('click', () => {
  toggle.setAttribute('aria-expanded', String(!isOpen()));
});

// Escape closes the menu and returns the focus to the button
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape' && isOpen()) {
    toggle.setAttribute('aria-expanded', 'false');
    toggle.focus();
  }
});

// The header hides on the way down and comes back on the way up
let lastY = window.scrollY;
window.addEventListener('scroll', () => {
  const y = window.scrollY;
  header.classList.toggle('is-hidden', y > lastY && y > header.offsetHeight && !isOpen());
  lastY = y;
}, { passive: true });

7 rules for navigation

01

The visitor’s words

“Kitchens” and “Prices”, not “Solutions” and “Ecosystem”.
02

Up to seven items

The rest goes into groups, “More” or the footer.
03

Show where I am

The current section is marked by shape and by aria-current.
04

The main sections in view on a phone

A bottom tab bar or a row under the header, not everything in the burger.
05

Rows of 48 px

In the mobile menu the finger should not miss.
06

The header returns on the way up

It does not take the screen while reading and is there when needed.
07

One order on every page

Sections do not move, and the footer repeats the main ones.

Common mistakes with navigation

Clever section names

People do not guess and leave for a site where things are called by their names.
A burger on a desktop

There is room for the whole menu, but it is hidden anyway.
Dropdowns only on hover

They cannot be opened with a finger or a keyboard.
No “you are here” mark

After two clicks it is not clear which section the page belongs to.
The close button in a new place

The finger has to travel across the screen to close the menu.
A sticky header a third of the screen high

On a phone two thirds remain for the content.

Questions about navigation

Burger or bottom tab bar?

A tab bar if there are four or five sections people switch between often. A burger if there are many sections and each is visited rarely.

How many items should the main menu have?

Up to seven. If there are more, group them or move the minor ones to the footer.

Should the logo lead to the home page?

Yes, people expect it. A separate “Home” item is then not needed.

When are breadcrumbs needed?

In catalogues and sites with three or more levels. On a phone one step back is enough.

When is a mega menu justified?

In a catalogue with dozens of categories: columns with headings, opening on click, working from the keyboard.

What else belongs in the mobile menu?

What people look for most: search, a phone or a messenger, the language switch and the account.

Navigation and the mobile menu: where am I and where can I go

In short

Sections named in the visitor’s words

Three ways to fit a menu on a phone

Which pattern to choose

What an open mobile menu needs

A header that steps aside

Navigation in code: 3 examples

Header markup

Phone and desktop

The button and the hiding header

7 rules for navigation

The visitor’s words

Up to seven items

Show where I am

The main sections in view on a phone

Rows of 48 px

The header returns on the way up

One order on every page

Common mistakes with navigation

Clever section names

A burger on a desktop

Dropdowns only on hover

No “you are here” mark

The close button in a new place

A sticky header a third of the screen high