Navigation and overlays

Context menu

The compact look of a desktop context menu, with labels, separators, shortcuts and a filled highlight. Pair it with a popover to show it.

Navigation and overlays4 classesNo JavaScriptLight and dark

Example

Full

context-menu.html

<div class="context-menu w-56" role="menu" aria-label="Edit"><button type="button" role="menuitem">Undo<span class="context-menu-shortcut">Ctrl Z</span></button><button type="button" role="menuitem" disabled>Redo<span class="context-menu-shortcut">Ctrl Y</span></button><div class="context-menu-separator" role="separator"></div><div class="context-menu-label">Clipboard</div><button type="button" role="menuitem">Cut<span class="context-menu-shortcut">Ctrl X</span></button><button type="button" role="menuitem">Copy<span class="context-menu-shortcut">Ctrl C</span></button><button type="button" role="menuitem">Paste<span class="context-menu-shortcut">Ctrl V</span></button></div>

Classes

4 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

Class	Type	What it does
	Base	Base class of the context menu. On a <div> in the example. Sets flex display, alignment, width, padding, text size and background, and `--tone` and `--tone-fg`. CSS `.context-menu :where(svg) { width: 1rem; height: 1rem; flex-shrink: 0; } [popover]:not(:popover-open):where(.menu, .dropdown-content, .context-menu, .popover) { display: none; }`
	Part	Part of the context menu. On a <div> in the example. Sets padding, text size, font weight and text color. CSS `.context-menu-label { padding: .375rem .5rem .25rem; font-size: .75rem; font-weight: 600; color: var(--muted-foreground); }`
	Part	Part of the context menu. On a <div> in the example. Sets height, margin and background. CSS `.context-menu-separator { height: 1px; margin: .25rem -.25rem; background: var(--border); }`
	Part	Part of the context menu. On a <span> in the example. Sets margin, padding, text size, text style and opacity. CSS `.context-menu-shortcut { margin-inline-start: auto; padding-inline-start: 1.5rem; font-size: .75rem; letter-spacing: .04em; opacity: .6; }`

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Context menu: start from the base class, then add modifiers -->
<div class="context-menu w-56" role="menu" aria-label="Edit"><button type="button" role="menuitem">Undo<span class="context-menu-shortcut">Ctrl Z</span></button><button type="button" role="menuitem" disabled>Redo<span class="context-menu-shortcut">Ctrl Y</span></button><div class="context-menu-separator" role="separator"></div><div class="context-menu-label">Clipboard</div><button type="button" role="menuitem">Cut<span class="context-menu-shortcut">Ctrl X</span></button><button type="button" role="menuitem">Copy<span class="context-menu-shortcut">Ctrl C</span></button><button type="button" role="menuitem">Paste<span class="context-menu-shortcut">Ctrl V</span></button></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

#Example

#Classes

#Usage

#Accessibility

#Related components

Example

Classes

Usage

Accessibility

Related components