Submenu

Code

Copy the markup

import "@luz-ds/catalog/components/submenu.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/submenu.min.css" integrity="sha384-y+7suWYL2a3Jot2cD9bCKS/ollQ/VHJGqkHQNIHmAEnQh1TyfrypOHFyhNk/3x3H" crossorigin="anonymous">

An item of the list of the catalog’s navbar, in a header such as the site header or the masthead, whose content is a <luz-submenu> around a <details>: its <summary> is the button, and a list of links follows it. No class: the tag is the block, and its parts are found by their place.

Give every submenu of the header the same name, so opening one closes the others.

<nav class="luz-navbar" id="site-nav" aria-label="Main" popover>
  <ul class="luz-navbar__list">
    <li><a class="luz-navbar__link" href="/" aria-current="page">Home</a></li>
    <li>
      <luz-submenu>
        <details name="site-menu">
          <summary>Wines</summary>
          <ul>
            <li><a class="luz-navbar__link" href="/wines/red/">Red wines</a></li>
            <li><a class="luz-navbar__link" href="/wines/white/">White wines</a></li>
          </ul>
        </details>
      </luz-submenu>
    </li>
    <li><a class="luz-navbar__link" href="/visits/">Visits</a></li>
  </ul>
</nav>

Variants and options

There are no variants. The attributes are the browser’s.

How it works

CSS from @luz-ds/catalog and a native <details>. No JavaScript: <luz-submenu> is a tag that no script ever defines.

• The browser opens and closes it, and tells assistive technology whether it is open. A submenu opens on a click, a tap, Enter or Space: never on hover, so it does not open under a pointer passing by, and it works the same on a touch screen.
• At 768 px and below, inside the header’s menu, the links of a group open in place, under their button, indented, and push the next links down.
• From 769 px, where the header’s links are a row, they open in a box under their button, over the page; the page does not move. The box of the last item opens toward the start of the row, so it stays in the window, in either direction of text.
• The chevron is drawn with two borders and has no text: the state is the one the browser exposes.
• It does not use the popover API: a popover sits in the top layer, so it could not open in place inside the menu.

Without JavaScript

Nothing changes: there is no script. The links are plain links.

Keyboard and ARIA

• Order: a closed submenu is one stop, its button. Open, its links come right after it, then the next item of the header.
• Keys: Enter or Space on the button opens and closes it; focus stays on the button. Tab and Shift+Tab move through the links. Escape does nothing in a submenu (see Known issues); in the header’s menu at 768 px and below it closes the menu and returns focus to the menu button.
• Names: the button’s name is its text. The browser exposes the expanded state of a <summary>: write no aria-expanded, no role="menu" and no role="menuitem"; these are links in a navigation landmark, not an application menu.
• Current page: put aria-current="page" on the link of the page, in the submenu too.

Contrast and focus are in the Design tab.

Design

When to use

Use it when the header needs more links than fit in a short row, and some of them belong together: the kinds of wine, the pages about the company.

When not to use

Do not use it for a single link, or to hide pages most visitors need: put those in the row itself.

• Do not nest a submenu in a submenu: two levels hide pages from the visitor and are hard to use with a pointer and a keyboard.
• Do not put actions, forms or settings in it: it holds links to pages. For actions use buttons, or a dropdown.
• If every group has many links, give each group a page of its own and link to it: a long submenu is a page in a box.

It replaces a dropdown navigation built with a script, and the hover menu. Nothing in LUZ is removed.

Do and don't

Writing the content

Name the group with one or two words in sentence case that say what it holds: “Wines”, “About us”.

• Name each link after the page it opens, so it makes sense outside the group: “Red wines”, not “Red”.
• Do not make the group’s name a page of its own as well: the button opens the group, it does not go anywhere. If the group has an overview page, make it the first link: “All wines”.
• Keep the same groups, in the same order, on every page.

Contrast and focus

The button and the links in the row sit on the page; from 769 px the box is a raised surface with a border and a shadow.

Measured from the token values of each mode, rounded down. Needs is the WCAG 2.2 AA minimum: 4.5:1 for text, 3:1 for focus rings. In the menu at 768 px and below, the links are on the menu’s page surface, as in the first two rows.

• Focus: core’s 2 px --luz-focus-ring outline, 2 px outside the button and each link.
• Open, the chevron points up as well as the button’s text getting darker: the state is never only a colour.
• The current page’s link is underlined, as in the row.

Tokens it uses

The 14 tokens that the rules of catalog’s components/submenu.css read, by family. The links in it are the catalog’s navbar links. Each family links to its page, with the values in every mode. In Figma they are variables with the same names: see Tokens in Figma.

Color

--luz-divider, --luz-surface, --luz-text-primary, --luz-text-secondary

Spacing and sizing

--luz-control-lg, --luz-space-2xs, --luz-space-xs, --luz-space-md, --luz-space-xl

Typography

--luz-font-sans, --luz-text-md

Radius

--luz-radius-md

Shadows

--luz-shadow-md

Layers

--luz-z-overlay

Keyboard and ARIA are in the Code tab.