Menu & dropdown

Overview

.menu is a bordered list of .menu__item rows (280px max width, scrollable list). Use .menu--caret or .menu--caret-left for popover pointers. .dropdown wraps a field-like trigger, hint, and a floating .dropdown__panel that contains a menu.

Prerequisites

• PimentCSS installed, Installation.
• Input fields, dropdown triggers extend .field (Input fields).
• Icons, row icons via ph() (Phosphor in this doc).
• Depth, panels use box-shadow: var(--shadow-md) (Depth & shadows).

Menu item states

Rows are <button type="button"> elements. Doc-only .menu__item--hover previews hover; live UIs use :hover. Selected pairs with aria-selected="true". Disabled rows use the disabled attribute.

Menu variants

Plain menu, centered caret (.menu--caret), or left-aligned caret (.menu--caret-left). Items can be text-only or include leading and trailing icons.

<div class="menu" role="listbox" aria-label="Choices">
  <div class="menu__list"><button type="button" class="menu__item" role="option">Option 1</button><button type="button" class="menu__item menu__item--selected" role="option" aria-selected="true">Option 2</button></div>
</div>

Dropdown

Closed and open states below are static previews. The live example wires toggle, selection, arrow keys, Home/End, Escape, and outside click (same pattern as the date picker and autocomplete).

Interactive dropdown

Add data-dropdown-live on .dropdown and call wireAllDropdowns() after load. Copy menu-dropdown-behavior.ts into your app.

import { bindDropdownDismiss, wireAllDropdowns } from './menu-dropdown-behavior';

bindDropdownDismiss();
wireAllDropdowns();

// Markup: .dropdown[data-dropdown-live], button.dropdown__trigger[aria-expanded][aria-controls],
// .menu[role="listbox"]#id, options with role="option" and optional data-label / data-value.

Class reference

Customize (Sass)

1. 01

   Menu width and scroll

   Override list width, item padding, and max height before importing components.
   variables

   @use "pimentcss-design-system" with (
     $menu-width: 20rem,
     $menu-item-padding-x: 1rem,
     $menu-item-padding-y: 0.5rem,
     $menu-max-height: 18rem
   );

2. 02

   Rebuild CSS

   Run after editing _menu.scss or _dropdown.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps