Create a responsive navigation menu without JavaScript

A responsive navigation menu helps visitors move around your website comfortably on phones, tablets and desktop screens. It can collapse into a compact mobile control, expand when needed and rearrange links for wider displays without relying on a JavaScript library.

For many small businesses, creators and online stores, a CSS-only menu is fast to load and simple to maintain. Fewer dependencies can also reduce the chance that a failed script, blocked resource or coding error will leave visitors unable to reach important pages.

This approach suits Australian websites serving customers in Sydney, Melbourne, Brisbane, Perth and regional areas. Many people browse while commuting, waiting for coffee or using a phone on a variable mobile connection, so a clear mobile menu and efficient page structure matter.

The example below uses semantic HTML, a hidden checkbox and CSS media queries. It is suitable for a blog, VTU platform, service website or digital shop, although accessibility testing is still essential before publishing.

Plan the menu structure before styling

Start with the links visitors actually need. A small business website might include Home, Services, Pricing, Blog and Contact. A VTU software website may need Airtime, Data, Transactions, Tutorials and Support. Keeping the primary navigation focused prevents a narrow phone screen from becoming a wall of competing links.

Use a <nav> element with an accessible label, then place the links in an unordered list. The menu button should have a visible text label such as “Menu” rather than relying only on a familiar icon. Text remains clearer for new users and is easier for screen readers to interpret.

The checkbox controls whether the mobile menu is displayed. Its label acts as the clickable button, while the general sibling selector reveals the navigation when the checkbox is checked. The checkbox is visually hidden rather than removed from the document, allowing keyboard users to reach it.

<header class="site-header">
  <a class="brand" href="/">Harbour Digital</a>

  <input class="menu-toggle" type="checkbox" id="menu-toggle">
  <label class="menu-button" for="menu-toggle">
    <span class="menu-icon" aria-hidden="true">☰</span>
    <span>Menu</span>
  </label>

  <nav class="site-nav" aria-label="Primary navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/pricing">Pricing</a></li>
      <li><a href="/blog">Blog</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

Build the mobile-first CSS

A mobile-first layout treats the narrow screen as the default. The navigation is initially hidden, while the menu button remains available. Once the checkbox is checked, the menu appears beneath the header as a vertical list.

The CSS below avoids JavaScript and uses a breakpoint at 768 pixels. That value is only a starting point; choose a breakpoint based on the point where the links stop fitting comfortably, rather than on a particular device model.

* {
  box-sizing: border-box;
}

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 5%;
  background: #123047;
}

.brand,
.site-nav a,
.menu-button {
  color: #fff;
}

.brand {
  font-weight: 700;
  text-decoration: none;
}

.menu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.menu-button {
  cursor: pointer;
  padding: 0.6rem 0.8rem;
  border: 1px solid #fff;
  border-radius: 0.3rem;
}

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.75rem 5%;
  background: #123047;
}

.site-nav ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 0.75rem 0;
  text-decoration: none;
}

.menu-toggle:checked ~ .site-nav {
  display: block;
}

.menu-toggle:focus-visible + .menu-button,
.site-nav a:focus-visible {
  outline: 3px solid #f7c948;
  outline-offset: 3px;
}

At this stage, the menu works on small screens, but the absolute positioning means it may cover content below the header. That is acceptable for a short navigation list, provided the open menu has a solid background and sufficient contrast. For longer menus, a normal-flow design may provide a better experience.

Turn it into a desktop navigation bar

On larger screens, the menu button should disappear and the navigation should become part of the header layout. The links can sit in a horizontal row with generous spacing, making them easier to scan with a mouse, trackpad or keyboard.

@media (min-width: 768px) {
  .site-header {
    justify-content: space-between;
  }

  .menu-button {
    display: none;
  }

  .site-nav {
    position: static;
    display: block;
    padding: 0;
    background: transparent;
  }

  .site-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
  }

  .site-nav a {
    padding: 0.5rem 0;
  }

  .site-nav a:hover,
  .site-nav a:focus-visible {
    color: #f7c948;
  }
}

Use clamp() or flexible spacing instead of fixed margins that may break on an intermediate screen. An Australian ecommerce site may receive visitors from a wide range of devices, including older Android phones, tablets used in warehouses and large desktop monitors in offices.

If the site sells digital products or services, make high-value links especially obvious. A “Get started”, “View plans” or “Contact us” link can receive a button style, but it should still remain part of the logical navigation order. For businesses collecting customer information, the surrounding site should also respect the Privacy Act 1988 and explain how submitted details are handled.

A clear menu can support a content strategy as well. If you are building tutorials for software users, a useful guide on video tutorial series can sit under a Tutorials or Resources link instead of being hidden in an overcrowded dropdown.

Improve accessibility and usability

A CSS-only menu is not automatically accessible. The hidden checkbox method has limitations: the label does not communicate expanded or collapsed state to assistive technology, and the menu does not automatically close when a visitor selects a link. For a simple site, this may be manageable, but test it with keyboard navigation and a screen reader.

Keep the focus indicator visible, use sufficient colour contrast and make each tap target comfortably large. A minimum target size around 44 by 44 pixels is a useful practical guide. Avoid turning the whole header into a tiny icon row, particularly for visitors using phones outdoors in bright Australian sunlight.

The navigation should remain usable at 200% zoom and with increased text spacing. Do not depend on hover to reveal essential links because touchscreens do not provide hover consistently. Use descriptive link text, place the current-page indicator in the markup and ensure the menu does not move content unpredictably when it opens.

You can improve the state information with a small amount of progressive enhancement later, but the core links should remain available when CSS is disabled. For sites governed by accessibility expectations, including organisations covered by the Disability Discrimination Act 1992, test with keyboard-only interaction, VoiceOver or TalkBack, and browser zoom.

Test the menu across Australian browsing conditions

Check the layout at 320 pixels wide, 375 pixels wide, tablet widths and a large desktop viewport. Test long labels such as “Airtime to cash” or “Business messaging”, as these expose wrapping problems faster than short labels. Also check whether the open menu sits above banners, cookie notices and sticky checkout elements.

Use browser developer tools to emulate touch input, but also test on a real phone. Australian users may browse over public Wi-Fi, mobile networks or an NBN connection shared with several household members. The menu itself should add almost no loading cost, and the CSS should not depend on a remote icon font to display its main control.

Confirm that every link works, the focus order is sensible and the menu remains readable in high-contrast settings. Check landscape orientation as well, especially on smaller phones where a horizontal desktop layout can activate too early. Use compressed images and system fonts around the navigation so the header appears quickly.

If a new website direction fails to attract users, navigation data can help identify whether the problem is structure, messaging or the offer itself. Businesses can also learn from pivoting a business when deciding which pages deserve priority in the next version of a site.

Approach	JavaScript required	Strengths	Limitations
Checkbox and CSS	No	Lightweight, simple and easy to deploy	Limited menu state information for assistive technology
CSS hover menu	No	Quick for basic desktop links	Poor fit for touchscreens and keyboard users
JavaScript toggle	Yes	Better control of ARIA state and closing behaviour	Adds code, testing and maintenance
Native details element	No	Built-in disclosure behaviour and good progressive enhancement	Styling and multi-level navigation can require care

A responsive navigation menu should make important pages easier to find, not merely demonstrate a clever CSS technique. Build the semantic HTML first, keep the mobile layout uncluttered, then use media queries to create the desktop arrangement. Test the result with real content, real devices and real users before treating it as finished.

Use this pattern as a foundation for your next Australian business website, VTU platform or creator portfolio. Copy the markup, adapt the colour and spacing to your brand, then run a keyboard and mobile check before publishing the menu for customers.