Components

Responsive Menu

Primary nav uses .wckd-menu with a horizontal link list and .hamburger-btn. wckd-ui.js measures overflow: when links no longer fit the live container width, it switches to compact drawer mode with no hand-tuned CSS breakpoint for that transition.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing this component.

Default implementation

Standard horizontal navigation

Use this for desktop-first layouts. wckdMenu measures whether the horizontal links still fit inside .wckd-menu; when they overflow, it enables compact mode and the hamburger with no breakpoint value for you to tune for that switch.

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</a></li>
    </ul>
  </div>
  <button class="hamburger-btn" aria-label="Menu"></button>
</nav>

Configuration options

Start from the default implementation, then apply one of these intent-driven variations based on your content and interaction goals.

Nested submenu (dropdown)

Put a ul inside a top-level li after its link. On wide layouts, the kit shows a flyout on hover (see wckd-ui-components.css). In compact or mobile drawer mode, wckdMenu injects a button.wckd-menu-submenu-toggle and toggles li.expanded for keyboard and touch. Open the hamburger in a narrow viewport to try that.

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

  • Compact vs. inline is decided by overflow measurement (link row width vs. .wckd-menu width, debounced on resize), not by a breakpoint you set. Give the menu a predictable flex or grid share of the header so the measurement matches your layout intent.
  • Place .wckd-menu before .hamburger-btn in source order so compact controls align predictably on the right edge.
  • Keep top-level items as real links even when they also reveal submenus, so no-JS and keyboard navigation still works.
  • Do not remove .hamburger-btn; the menu module uses it for compact and drawer interaction states.

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 behavior in compact mode (submenu toggle buttons are injected at runtime).

← All components