Menu, Popover, Hover, Command Bar

Advanced UI Components

Context Menu, Popover, Hover Card, Command Bar, Spotlight

Five interaction patterns built entirely from cssvars.css — no custom CSS rules, no JavaScript. Every open/close/hover state is driven by native HTML (<details>, :checked, :hover) or the browser's own resize behavior.

1. Context Menu

Built on the existing .dropdown-state checkbox + .dropdown-menu pair. A real OS-style right-click menu that appears at the cursor needs JS to read the click coordinates — this version trades that for a visible trigger (the kebab icon), which keeps it fully CSS-only and works on touch devices too.
Quarterly-Report.pdf

2. Contextual Popover

Same .dropdown-state / .dropdown-menu mechanism as the context menu, but the panel holds rich content (heading, text, actions) instead of a .menu list — this is really the same primitive with different contents.

Assign this task

Choose a teammate to take ownership. They'll be notified immediately.

3. Hover Card

Pure .tooltip / .tooltip-body — the framework already reveals .tooltip-body on :hover. Widening it with .tooltip3x and filling it with real content turns the tooltip primitive into a hover card, zero new CSS.

Reviewed by @kim.majali KM Kim Majali Creator, CSS Vars Framework Building dependency-free, zero-JS CSS tooling. 500+ utility classes, one stylesheet. 128 repos 4.2k stars on Jul 29.

4. Command Bar

Reuses .modal-state / .modal / .modal__inner. Without JS the list can't live-filter as you type, so it's presented as a grouped, always-visible command list — a real "type to filter" experience is the one honest JS trade-off in this set.

Suggested

Navigation

5. Spotlight Search

A full-screen variant of the same .modal primitive used for the Command Bar — larger input, centered higher on screen, results grouped by type.
← Previous Next →

Built with love in by Kim Majali, EITO team, and contributors.