ContextMenu

Das ContextMenu öffnet ein Popover mit Aktionen oder Links, meist über einen Button.

import {
  Button,
  ContextMenu,
  ContextMenuTrigger,
  MenuItem,
} from "@mittwald/flow-react-components";

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu
    onAction={(id) => {
      alert(id);
    }}
  >
    <MenuItem id="1">Item 1</MenuItem>
    <MenuItem id="2">Item 2</MenuItem>
    <MenuItem id="3">Item 3</MenuItem>
  </ContextMenu>
</ContextMenuTrigger>

Best Practices

Sammle Aktionen in einem ContextMenu, um die Oberfläche aufgeräumt zu halten.
Zeige nur kontextrelevante Inhalte.
Benenne die Aktionen klar und verständlich.
Stelle häufig genutzte Aktionen nach oben, damit sie leicht erreichbar sind.
Gruppiere bei Bedarf mit einer Section‍ oder einem Separator‍. Das erhöht die Übersichtlichkeit.

Einfach-Auswahl

Durch selectionMode="single" verhalten sich die Menüeinträge des ContextMenu wie eine RadioGroup‍, sodass nur ein Element ausgewählt werden kann.

Mehrfach-Auswahl

Durch selectionMode="multiple" verhalten sich die Menüeinträge des ContextMenu wie Checkboxen‍, sodass mehrere Optionen ausgewählt werden können.

Mit Switch

Ein Switch‍ im ContextMenu ermöglicht es, Aktionen direkt zu aktivieren oder deaktivieren.

Mit Icon

Verwende Icons‍ innerhalb vom <MenuItem />, um Aktionen schneller verständlich zu machen oder bekannte Funktionen klarer zu vermitteln.

Mit Separator

Ein Separator‍ gruppiert logisch zusammengehörige Aktionen.

Mit ContextMenuSections

Eine ContextMenuSection sorgt im ContextMenu für klare Struktur, indem sie eine Heading‍ und definierte Abstände verwendet.

Mit fester Breite

Lege eine Breite für dein ContextMenu fest, um beispielsweise zu verhindern, dass das ContextMenu zu breit wird oder die Breite des ContextMenus beim Nachladen von Daten springt.

Mit Selection Mode

Setze selectionMode direkt auf einer ContextMenuSection, um mehrere Auswahlgruppen mit jeweils eigenem Auswahlverhalten zu kombinieren.

Mit Avatar

Verwende das ContextMenu als Profilmenü, indem innerhalb ein Avatar‍ und eine Heading‍ platziert werden.

States

Ein MenuItem kann unterschiedliche States annehmen, die anzeigen, dass aktuell keine Interaktion möglich ist.

Disabled – Verwende den Disabled-State, wenn das MenuItem keine Aktion oder kein Ereignis auslösen soll.
Pending, Succeeded und Failed – signalisieren dem Nutzer, dass im Hintergrund etwas passiert, nachdem er auf ein MenuItem geklickt hat. Verwende das MenuItem zusammen mit der Component Action‍, um die States zu steuern.

Kombiniere mit …

Aktionen im ContextMenu können Modals‍ als Overlay öffnen, wenn zusätzliche Informationen erfasst, bestätigt oder bearbeitet werden müssen.

Properties

Property	Type	Default	Description
`UNSTABLE_portalContainer`	`Element`	document.body	The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.
`arrowBoundaryOffset`	`number`	0	The minimum distance the arrow's edge should be from the edge of the overlay element.
`arrowRef`	`RefObject<Element>`	-	A ref for the popover arrow element.
`boundaryElement`	`Element`	document.body	Element that that serves as the positioning boundary.
`children`	`ReactNode`	-
`className`	`ClassNameOrFunction<PopoverRenderProps>`	'react-aria-Popover'	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
`containerPadding`	`number`	12	The placement padding that should be applied between the element and its surrounding container.
`controller`	`OverlayController`	-	An overlay controller to control the popover state.
`crossOffset`	`number`	0	The additional offset applied along the cross axis between the element and its anchor element.
`defaultOpen`	`boolean`	-	Whether the overlay is open by default (uncontrolled).
`defaultSelectedKeys`	`"all" \| Iterable<Key>`	-	The initial selected keys in the collection (uncontrolled).
`dir`	`string`	-
`disabledKeys`	`Iterable<Key>`	-	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
`getTargetRect`	`((target: Element) => DOMRect)`	target.getBoundingClientRect()	Overrides the target element's bounding rectangle. Useful for positioning relative to a specific point such as the mouse cursor (e.g. context menus) or text selection. @param target - The target element.
`hidden`	`boolean`	-
`inert`	`boolean`	-
`isDialogContent`	`boolean`	-	Whether the popover contains a dialog.
`isEntering`	`boolean`	-	Whether the popover is currently performing an entry animation.
`isExiting`	`boolean`	-	Whether the popover is currently performing an exit animation.
`isKeyboardDismissDisabled`	`boolean`	false	Whether pressing the escape key to close the popover should be disabled. Most popovers should not use this option. When set to true, an alternative way to close the popover with a keyboard must be provided.
`isNonModal`	`boolean`	-	Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies. Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
`isOpen`	`boolean`	-	Whether the overlay is open by default (controlled).
`lang`	`string`	-
`maxHeight`	`number`	-	The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.
`offset`	`number`	8	The additional offset applied along the main axis between the element and its anchor element.
`placement`	`Placement`	'bottom'	The placement of the element with respect to its anchor element.
`render`	`DOMRenderFunction<"div", TooltipRenderProps>`	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`renderEmptyState`	`(() => ReactNode)`	-	Provides content to display when there are no items in the list.
`scrollRef`	`RefObject<Element>`	overlayRef	A ref for the scrollable region within the overlay.
`selectedKeys`	`"all" \| Iterable<Key>`	-	The currently selected keys in the collection (controlled).
`selectionMode`	`ContextMenuSelectionMode`	-	The type of selection that is allowed in the context menu.
`shouldCloseOnInteractOutside`	`((element: Element) => boolean)`	-	When user interacts with the argument element outside of the popover ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the popover. By default, onClose will always be called on interaction outside the popover ref.
`shouldFlip`	`boolean`	true	Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
`shouldUpdatePosition`	`boolean`	true	Whether the overlay should update its position automatically.
`slot`	`string`	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`style`	`StyleOrFunction<TooltipRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
`translate`	`"yes" \| "no"`	-
`trigger`	`string`	-	The name of the component that triggered the popover. This is reflected on the element as the `data-trigger` attribute, and can be used to provide specific styles for the popover depending on which element triggered it.
`triggerRef`	`RefObject<Element>`	-	The ref for the element which the popover positions itself with respect to. When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone.
`width`	`string \| number`	-	Sets the context menu to a fixed width.
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Events

Property	Type	Default	Description
`onAction`	`((key: Key, value: MenuItemProps) => void)`	-	Handler that is called when an item is selected.
`onClick`	`MouseEventHandler<HTMLDivElement>`	-
`onOpenChange`	`((isOpen: boolean) => void)`	-	Handler that is called when the overlay's open state changes.
`onSelectionChange`	`((keys: Selection) => void)`	-	Handler that is called when the selection changes.

Accessibility

Property	Type	Default	Description
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	`string`	-	Defines a string value that labels the current element.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element.

Components

Integrations