Overlays

Menu

Popover list of actions with icons, shortcuts, hints, section headings, dividers and a danger item.

• Provide items: {label, icon?, hint?, shortcut?, danger?, disabled?, onSelect}, {heading} or 'divider'. onClose fires on select, Escape, or a press outside the menu and its anchor. Arrow keys move focus.
• Position it yourself (absolute, inside the same wrapper as its trigger). Destructive items go last, after a divider.
• hint is a quiet second line — use it when labels alone could be confused (the export formats). heading labels a section in a menu that holds other actions.
• Export: never hand-build export items — use exportItems(onExport, { heading }) (Single-page PDF · Multi-page PDF · .visualli file). There is no Share: Visuallis are private.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface MenuProps {
  items: MenuItem[];
  label?: string;
  onClose?: () => void;
  className?: string;
  style?: CSSProperties
}

Use

import { Menu } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/Menu/README.md