AIAIAI Design System

Menu & Popover

Floating menus for contextual actions and positioned popovers for lightweight content. Arrow key navigation, typeahead search, and Escape to close.

Menu

Anchored dropdown menu with keyboard navigation (ArrowUp/Down, Home/End, typeahead). Each MenuItem renders as a focusable button with role="menuitem".

Popover

Generic positioned floating content. Anchored to a trigger element with placement control and viewport-aware flipping. Used internally by Menu and Combobox.

Popover Placement

bottom-start Default. Below trigger, aligned left.
bottom-end Below trigger, aligned right.
top-start Above trigger, aligned left.
top-end Above trigger, aligned right.

TOKEN REFERENCE

Menu & Popover use component tokens from components.css:

--menu-padding: var(--space-xs)--menu-item-padding: var(--space-xs) var(--space-sm)--menu-item-radius: var(--radius-sm)--menu-item-hover-bg: var(--color-surface-secondary)--menu-item-font: var(--type-body-sm-font)--menu-separator-margin: var(--space-xs) 0--popover-bg: var(--raw-color-white)--popover-border: var(--elevation-border-strong)--popover-shadow: var(--elevation-overlay)--popover-radius: var(--radius-md)--popover-z: 50