How to build responsive navigation

Responsive navigation gives visitors a dependable route through your site, whether links sit across a wide header or open from a button on a phone. The work includes what happens after someone opens, closes or follows a link.

This guide builds one simple pattern: a horizontal set of links that becomes a disclosure panel when space runs short. A disclosure shows and hides content without taking over the whole page. It suits many small business sites and portfolios.

Imagine a ceramics studio with classes, a shop and a physical location. Its navigation could use these labels:

Keep the same destinations in the wide and compact layouts. A phone visitor still needs the full set of useful pages. Put less frequent destinations in the footer where appropriate, and make the studio logo a clearly named link home.

Use the actual labels when designing. A layout that fits “About” may fail with “Private group workshops.” Check that every destination exists before adding it to the header.

Use links for destinations and a button for opening the compact navigation. A styled piece of text with a click handler does not automatically behave like either.

Group the primary links in a navigation landmark, normally an HTML nav element. If the page has several navigation regions, give them distinguishable names. MDN explains the purpose of the nav element.

Give the disclosure button a clear name such as Menu. Its expanded state should match whether the links are visible, with aria-expanded updated accordingly and aria-controls identifying the panel. Ordinary website links do not need the ARIA menu role or desktop application menu behavior; W3C's disclosure navigation example explains that distinction.

Start with the logo, links and any main action at their intended sizes. Narrow the browser until they become crowded. That is the point to consider the compact layout; a particular phone model or a borrowed breakpoint does not decide it for you.

Place the opened panel below the header for this version. Give each link a comfortable row, allow longer labels to wrap, and leave enough room to scroll through the panel on a short screen. Keep the page usable below it.

In Mythos, request this as one focused navigation edit, naming the existing header, destinations and desired behavior. The building and editing workflow explains how to inspect the updated Preview before continuing.

For this disclosure, keep focus on the Menu button when it opens. Tab should then reach the links in order; Shift+Tab should move back through them. Enter and Space should operate the button. Escape should close an open panel and return focus to its controlling button.

When the panel is closed, its links must not remain invisible stops in the keyboard sequence. Hiding only the panel's appearance is insufficient. HTML's hidden state is one way to remove currently unavailable content from presentation.

Keep keyboard movement consistent with the page's meaning, as described in W3C's focus-order guidance. This panel does not trap focus: visitors can continue into the page after its links.

A visitor using Tab needs to see which control will respond next. Give every header link and button a persistent, visible focused state. A clear border or background treatment can fit the site's design; removing the indicator leaves keyboard users guessing. W3C's focus-visible guidance describes this requirement.

Also distinguish the current page. For example, Classes can remain visibly selected while someone reads that page, with aria-current identifying the current destination. This is a different state from keyboard focus.

If you use a sticky header, follow an in-page link and check where its heading lands. The header should not cover the content the visitor came to read.

Check the behavior between states, including changes in width:

Open a deeper page directly, too. Navigation should not depend on having visited the homepage first. Repeat the compact-menu journey with touch and a screen reader; a successful mouse check does not establish accessibility.

Check the studio's Classes, Shop, Visit and About pages after the edit. Look for page-specific problems such as a transparent header disappearing against a photograph or a long title sitting underneath it.

Describe any failure precisely when asking Mythos for a follow-up: which page, what width, which action and what happened. Once the revised Preview works, publish the update and repeat the main route on the public URL.

For the rest of the page, continue with making a website mobile-friendly. The navigation is finished when people can find, open and leave its destinations reliably.