Components

Responsive Menu

Header row: .wckd-menu wraps ul.horizontal.hamburger-collection; sibling button.hamburger-btn opens compact mode. wckd-ui.js measures overflow; no manual breakpoint for the switch. Nested flyouts: ul inside a top-level li after its link; compact mode injects submenu toggles.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Standard horizontal navigation

Source order: .wckd-menu then .hamburger-btn. Give type="button" on the hamburger.

Markup

<nav class="flex aligned-middle gap">
  <a class="site-logo" href="/">Brand</a>
  <div class="wckd-menu">
    <ul class="horizontal hamburger-collection aligned-right">
      <li><a href="/">Home</a></li>
      <li><a href="/products">Products</a></li>
    </ul>
  </div>
  <button type="button" class="hamburger-btn" aria-label="Menu" aria-expanded="false"></button>
</nav>

Configuration options

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

Nested submenu (dropdown)

Nested ul lives in the parent li after its link. Narrow viewport: open the hamburger and exercise the injected submenu buttons.

Markup

<nav class="flex aligned-middle gap">
  <a class="site-logo" href="/">Brand</a>
  <div class="wckd-menu">
    <ul class="horizontal hamburger-collection aligned-right">
      <li><a href="/">Home</a></li>
      <li>
        <a href="/services">Services</a>
        <ul>
          <li><a href="/services/design">Design</a></li>
          <li><a href="/services/dev">Development</a></li>
        </ul>
      </li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>
  <button class="hamburger-btn" type="button" aria-label="Menu" aria-expanded="false"></button>
</nav>

When to use

  • Site and product header navigation with a small number of top-level routes.
  • Docs or marketing shells that need a horizontal desktop menu and compact mobile drawer from one markup shape.
  • Nested route groups where first-level links remain directly navigable.

Implementation notes

  • Overflow measurement compares link row width to .wckd-menu width (debounced resize). Size the header flex/grid so that measurement matches your intent.
  • Keep .wckd-menu before .hamburger-btn in the DOM.
  • Do not delete .hamburger-btn; the module binds compact mode to it.

Developer checklist

  • Use <nav> with an accessible label (or surrounding context), one .wckd-menu block, and one .hamburger-btn sibling.
  • Keep list structure ul > li > a and place submenu ul directly inside the parent li after its anchor.
  • Verify keyboard and touch behaviour in compact mode (submenu toggle buttons are injected at runtime).

← All components