The .menu component provides a flexible, accessible navigation menu for your site. It supports both standard and overlay navigation modes, making it easy to create modern, interactive menus that adapt to your design and usability needs—using only HTML, SCSS, and a little JavaScript for toggling overlays.

Key Features

Overlay and inline modes: Use a full-screen overlay menu or a classic inline navigation.
Highly customizable: Control structure, classes, and styles via HTML and CSS variables.
Responsive design: Adapts layout and spacing at different breakpoints.
Accessible markup: Uses semantic HTML and ARIA roles for better accessibility.
Animated transitions: Smooth open/close and item animations for overlay navigation.
CSS-only hamburger toggle: Mobile nav collapses behind a checkbox-driven label; no JS needed. Requires the hamburgermobile prop on the WebC component.
Vertical flex layout: Add nav-flex-column to <ul class="nav"> for sidebar or stacked navigation.
Supports submenus and headers: Easily add headers and nested items.
menu.js integration: Handles overlay toggling, accessibility, and dynamic data attributes for menu items.

How to use

Basic usage (inline menu)

<nav class="menu" aria-label="Main menu">
  <ul class="nav">
    <li class="nav-item current active"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#" title="Our assets - For you">Downloads</a></li>
    <li class="nav-item"><a href="#" title="Knowledge &amp; Fun">Blog</a></li>
    <li class="nav-item"><a href="#" title="Who we are">About us</a></li>
    <li class="nav-item"><a href="#" title="Legal Stuff">Impressum</a></li>
  </ul>
</nav>

Overlay navigation with toggle button and menu.js

Include the menu.js script in your HTML:

<script src="/media/templates/site/jcrafts/js/menu.js"></script>

Then use the following markup:

<button class="overlay-navigation-button"><span>Menu</span></button>
<div class="overlay-navigation" id="main-menu">
  <nav role="navigation">
    <ul class="nav">
      <li class="nav-item current active"><a href="#" title="Home">Home</a></li>
      <li class="nav-item"><a href="#" title="Our assets - For you">Downloads</a></li>
      <li class="nav-item"><a href="#" title="Knowledge &amp; Fun">Blog</a></li>
      <li class="nav-item"><a href="#" title="Who we are">About us</a></li>
      <li class="nav-item"><a href="#" title="Legal Stuff">Impressum</a></li>
    </ul>
  </nav>
</div>

The menu.js script will:

Automatically set up the overlay menu toggle (button opens/closes the menu).
Move the title attribute of each link to a data-content attribute for animated tooltips.
Ensure accessibility attributes and keyboard navigation are handled.
Display the overlay menu after a short delay for smooth transitions.

Hamburger mobile menu (CSS-only toggle)

Set the hamburgermobile prop to true on the <menu-l> WebC component (or pass hamburgerMobile: true via menu.njk context):

<menu-l :@hamburgermobile="true" ...></menu-l>

This renders a <label class="hamburger"> with a hidden checkbox before the <ul class="nav">:

<label class="hamburger full-width" aria-hidden="true">
  <input type="checkbox" id="hamburger" aria-label="hamburger"
         aria-controls="menu" aria-expanded="false" />
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
</label>
<ul class="nav">
  <!-- items -->
</ul>

How it works (no JS): The _menu.scss partial uses CSS :has() selectors:

:has(.hamburger) ul.nav — hides the nav on mobile (default closed).
:has(.hamburger input:checked) ul.nav — reveals the nav when the checkbox is checked.
The hamburger button is hidden at the lg breakpoint (desktop always shows the nav).

Vertical flex menu

Add the nav-flex-column modifier class to stack nav items vertically — useful for sidebars, footer menus, or sub-navigation:

<ul class="nav nav-flex-column">
  <li class="nav-item"><a href="#">Home</a></li>
  <li class="nav-item"><a href="#">Category</a></li>
  <li class="nav-item"><a href="#">Current Page</a></li>
</ul>

Pass via the WebC context:

menuClass: 'nav-flex-column'

Customizing structure and appearance

Add a custom header:

<nav class="menu" aria-label="Main menu">
  <h3 class="menu-header">Site Navigation</h3>
  <ul class="nav">
    <!-- menu items -->
  </ul>
</nav>

Override styles with CSS variables:

.overlay-navigation {
  --nav-overlay-background: #fffbe6;
  --nav-overlay-item-link: #222;
}

How it works

Use semantic HTML: <nav>, <ul>, <li>, and <a> for structure and accessibility.
Overlay navigation uses the .overlay-navigation class and is toggled with a button. The menu.js script handles all event listeners and accessibility enhancements.
SCSS partial (_menu.scss) provides all layout, animation, and responsive styles.
Use classes like .current and .active for the current menu item.
Customize with CSS variables for colors, spacing, and animation.
menu.js ensures that animated tooltips use the data-content attribute and that overlays are accessible and keyboard-friendly.

Example

<!-- Inline menu example -->
<nav class="menu" aria-label="Main menu">
  <ul class="nav">
    <li class="nav-item current active"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">Blog</a></li>
    <li class="nav-item"><a href="#">About</a></li>
  </ul>
</nav>

<!-- Overlay menu example with menu.js -->
<button class="overlay-navigation-button"><span>Menu</span></button>
<div class="overlay-navigation" id="main-menu">
  <nav role="navigation">
    <ul class="nav">
      <li class="nav-item current active"><a href="#" title="Home">Home</a></li>
      <li class="nav-item"><a href="#" title="Blog">Blog</a></li>
      <li class="nav-item"><a href="#" title="About">About</a></li>
    </ul>
  </nav>
</div>
<script src="/media/templates/site/jcrafts/js/menu.js"></script>

Result:

A modern, animated menu—either inline or overlay—styled with SCSS and fully accessible.
Overlay menu toggles open/closed with a button and animates items in. menu.js handles all logic and accessibility.
Responsive and easy to customize.

Reference

SCSS partial: components/_menu.scss
JS file: js/menu.js
Related mixins: mq (media queries), even-columns (layout)
Tokens used: --nav-overlay-background, --nav-overlay-item-link, --spacing-150, --font-family-heading, --color-cyan-600, etc.
Props: hamburgermobile (boolean) — enables the CSS-only hamburger toggle on mobile
Modifier class: nav-flex-column — stacks nav items in a vertical flex column

Tip: Use overlay navigation for mobile or landing pages to create a bold, immersive menu experience. All you need is semantic HTML, the SCSS partial, and the menu.js script for toggling overlays and accessibility.

HTML Code (Demo)

<label aria-hidden="true" class="hamburger full-width">
  <input type="checkbox" id="hamburger" aria-label="hamburger" aria-controls="menu" aria-expanded="false">
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
</label>
<ul class="nav">
  <li class="nav-item item-1 current active">
    <a href="#" title data-content tabindex="0">Home</a>
  </li>
  <li class="nav-item item-2">
    <a href="#" title data-content tabindex="0">Category</a>
  </li>
  <li class="nav-item item-3">
    <a href="#" title data-content tabindex="0">Current Page</a>
  </li>
</ul>

Configuration

Component Config: Navigation/menu/menu.config.js

{
  "title": "Hamburger Menu",
  "menuTagId": "",
  "menuClass": "",
  "moduleClass": "",
  "moduleTag": "div",
  "headerTag": "h3",
  "headerClass": "",
  "showHeader": false,
  "showSubMenuItems": false,
  "overlayNavigation": false,
  "hamburgerMobile": true,
  "moduleStyle": "html5",
  "items": [
    {
      "title": "Home",
      "url": "#",
      "active": true,
      "default": false,
      "linkTitleAttribute": ""
    },
    {
      "title": "Category",
      "url": "#",
      "active": false,
      "default": false,
      "linkTitleAttribute": ""
    },
    {
      "title": "Current Page",
      "url": "#",
      "active": false,
      "default": false,
      "linkTitleAttribute": ""
    }
  ]
}

Menu - Hamburger

Menu