Menu

Style Guide

Menu navigation, search, and disclosure surfaces.

Kind

Rendered Content

Documentation

Root

qp-menu

Menu navigation root.

Children

qp-menu__icon

Optional supporting icon within a menu link.

qp-menu__item

Menu item.

qp-menu__link

Menu link.

qp-menu__list

Menu item list.

qp-menu__mobile-toggle

Mobile menu disclosure control.

qp-menu__mobile-toggle-icon

Icon within the mobile menu control.

qp-menu__search

Menu search region.

qp-menu__search-input

Menu search input.

qp-menu__search-label

Accessible label for the menu search input.

qp-menu__submenu-toggle

Nested-menu disclosure control.

qp-menu__submenu-toggle-icon

Expand/collapse indicator within a nested-menu control.

Modifiers

qp-menu__list--nested

Nested menu item list.

qp-menu--footer

Footer menu presentation.

qp-menu--sidebar

Sidebar menu presentation.

States

qp-menu__search-empty

Empty search result message.

Runtime

qp-menu-open

Applied dynamically to the document root while a Menu is open in a mode that takes over page interaction; this is not a local class on the Menu root.

Kind: runtime
Trigger: A Menu opens in a mode that requires document-level interaction control.
Target: html
Lifecycle: Added while the takeover Menu is open and removed when that Menu closes.
Purpose: Enables document-level theme and runtime behavior such as page masking and scroll locking.

Example

Rendered HTML

<nav class="qp-menu" aria-label="Example navigation" data-qp-menu> <ul class="qp-menu__list"> <li class="qp-menu__item" data-qp-menu-item> <a class="qp-menu__link" href="#search"><svg class="qp-icon qp-menu__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M10.5 3a7.5 7.5 0 1 0 4.7 13.35L20.85 22 22 20.85l-5.65-5.65A7.5 7.5 0 0 0 10.5 3zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11z"/></svg> Search</a> </li> <li class="qp-menu__item" data-qp-menu-item> <a class="qp-menu__link" href="#about">About</a> </li> </ul> </nav>