# ContextMenu

Das ContextMenu öffnet ein Popover mit einer Liste von Aktionen oder Links, welches in der Regel über einen Button geöffnet wird.

## Overview

# Playground

Verwende `<ContextMenu />`, um ein ContextMenu darzustellen. Innerhalb von
`<ContextMenuTrigger />` muss ein `<Button />` und ein `<ContextMenu />`
kombiniert werden, um ein ContextMenu per
[Button](/04-components/actions/button/overview)-Klick zu öffnen. Die einzelnen
Aktionen werden über `<MenuItem />` definiert.

```tsx
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>
```

---

# Einfach-Auswahl

Durch `selectionMode="single"` verhalten sich die Menüeinträge des ContextMenu
wie eine [RadioGroup](/04-components/form-controls/radio-group/overview), sodass
nur ein Element ausgewählt werden kann.

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu
    selectionMode="single"
    defaultSelectedKeys={["item2"]}
  >
    <MenuItem id="item1">Item 1</MenuItem>
    <MenuItem id="item2">Item 2</MenuItem>
    <MenuItem id="item3">Item 3</MenuItem>
  </ContextMenu>
</ContextMenuTrigger>
```

---

# Mehrfach-Auswahl

Durch `selectionMode="multiple"` verhalten sich die Menüeinträge des ContextMenu
wie [Checkboxen](/04-components/form-controls/checkbox/overview), sodass mehrere
Optionen ausgewählt werden können.

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu
    selectionMode="multiple"
    defaultSelectedKeys={["item2", "item3"]}
  >
    <MenuItem id="item1">Item 1</MenuItem>
    <MenuItem id="item2">Item 2</MenuItem>
    <MenuItem id="item3">Item 3</MenuItem>
  </ContextMenu>
</ContextMenuTrigger>
```

---

# Mit Switch

Ein [Switch](/04-components/form-controls/switch/overview) im ContextMenu
ermöglicht es, Aktionen direkt zu aktivieren oder deaktivieren.

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu selectionMode="switch">
    <MenuItem id="item1">Item 1</MenuItem>
    <MenuItem id="item2">Item 2</MenuItem>
    <MenuItem id="item3">Item 3</MenuItem>
  </ContextMenu>
</ContextMenuTrigger>
```

---

# Mit Icon

Verwende [Icons](/04-components/content/icon/overview) innerhalb vom
`<MenuItem />`, um Aktionen schneller verständlich zu machen oder bekannte
Funktionen klarer zu vermitteln.

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

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

---

# Mit Separator

Ein [Separator](/04-components/structure/separator/overview) gruppiert logisch
zusammengehörige Aktionen.

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu>
    <MenuItem id="1">Item 1</MenuItem>
    <Separator />
    <MenuItem id="2">Item 2</MenuItem>
    <MenuItem id="3">Item 3</MenuItem>
  </ContextMenu>
</ContextMenuTrigger>
```

---

# Mit ContextMenuSections

Eine `ContextMenuSectionSection` sorgt im ContextMenu für klare Struktur, indem
sie eine [Heading](/04-components/content/heading/overview) und definierte
Abstände verwendet.

```tsx
import {
  Button,
  ContextMenu,
  ContextMenuSection,
  ContextMenuTrigger,
  Heading,
  MenuItem,
  Separator,
} from "@mittwald/flow-react-components";

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu>
    <ContextMenuSection>
      <Heading>Section 1</Heading>
      <MenuItem id="1">Item 1</MenuItem>
      <MenuItem id="2">Item 2</MenuItem>
      <MenuItem id="3">Item 3</MenuItem>
    </ContextMenuSection>
    <Separator />
    <ContextMenuSection>
      <Heading>Section 2</Heading>
      <MenuItem id="4">Item 4</MenuItem>
      <MenuItem id="5">Item 5</MenuItem>
    </ContextMenuSection>
  </ContextMenu>
</ContextMenuTrigger>
```

---

# 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.

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu
    width={300}
    onAction={(id) => {
      alert(id);
    }}
  >
    <MenuItem id="1">Mein Projekt</MenuItem>
    <MenuItem id="2">Mein zweites Projekt</MenuItem>
    <MenuItem id="3">
      Mein drittes Projekt mit einem sehr langen Namen
    </MenuItem>
  </ContextMenu>
</ContextMenuTrigger>
```

---

# Mit Selection Mode

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu>
    <ContextMenuSection selectionMode="multiple">
      <MenuItem id="item1">Item 1</MenuItem>
      <MenuItem id="item2">Item 2</MenuItem>
      <MenuItem id="item3">Item 3</MenuItem>
    </ContextMenuSection>
    <Separator />
    <ContextMenuSection selectionMode="single">
      <MenuItem id="item1">Item 4</MenuItem>
      <MenuItem id="item2">Item 5</MenuItem>
      <MenuItem id="item3">Item 6</MenuItem>
    </ContextMenuSection>
  </ContextMenu>
</ContextMenuTrigger>
```

---

# Mit Avatar

Verwende das ContextMenu als Profilmenü, indem innerhalb ein
[Avatar](/04-components/content/avatar/overview) und eine
[Heading](/flow/04-components/content/heading/overview) platziert werden.

```tsx
import {
  Avatar,
  Button,
  ContextMenu,
  ContextMenuTrigger,
  Heading,
  IconCamera,
  Initials,
  MenuItem,
  Section,
  Separator,
  Text,
} from "@mittwald/flow-react-components";

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu selectionMode="navigation">
    <Section>
      <MenuItem>
        <Avatar>
          <Initials>Max Mustermann</Initials>
        </Avatar>
        <IconCamera />
      </MenuItem>
      <Heading>Max Mustermann</Heading>
    </Section>
    <Separator />
    <Section>
      <MenuItem>
        <Text>Settings</Text>
      </MenuItem>
      <MenuItem>
        <Text>Logout</Text>
      </MenuItem>
    </Section>
  </ContextMenu>
</ContextMenuTrigger>
```

---

# States

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

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

<ContextMenuTrigger>
  <Button>Trigger</Button>
  <ContextMenu>
    <MenuItem isDisabled>Disabled</MenuItem>
    <MenuItem isPending>Pending</MenuItem>
    <MenuItem isSucceeded>Succeeded</MenuItem>
    <MenuItem isFailed>Failed</MenuItem>
  </ContextMenu>
</ContextMenuTrigger>
```

**Disabled:** Verwende den Disabled-State, wenn das MenuItem keine Aktion oder
kein Ereignis auslösen soll.

**Pending, Succeeded und Failed:** Pending, Succeeded und Failed sollen dem
Nutzer signalisieren, dass im Hintergrund etwas passiert, wenn er auf ein
MenuItem geklickt hat. Verwende das MenuItem zusammen mit der Komponente
[Action](/04-components/actions/action/overview), um die States zu steuern.

---

# Kombiniere mit

## Modal

Aktionen im ContextMenu können [Modals](/04-components/overlays/modal/overview)
als Overlay öffnen, wenn zusätzliche Informationen erfasst, bestätigt oder
bearbeitet werden müssen.

```tsx
import {
  ActionGroup,
  Button,
  Content,
  ContextMenu,
  ContextMenuTrigger,
  Heading,
  IconContextMenu,
  IconEdit,
  Label,
  MenuItem,
  Modal,
  TextField,
  Text,
  Action,
  useModalController,
} from "@mittwald/flow-react-components";

export default () => {
  const modalController = useModalController();

  return (
    <>
      <ContextMenuTrigger>
        <Button variant="plain" color="secondary">
          <IconContextMenu />
        </Button>
        <ContextMenu>
          <MenuItem
            onAction={() => {
              modalController.open();
            }}
          >
            <IconEdit />
            <Text>Bearbeiten</Text>
          </MenuItem>
        </ContextMenu>
      </ContextMenuTrigger>
      <Modal controller={modalController}>
        <Heading>Bearbeiten</Heading>
        <Content>
          <TextField>
            <Label>Name</Label>
          </TextField>
        </Content>
        <ActionGroup>
          <Action closeModal>
            <Button color="accent">Speichern</Button>
            <Button color="secondary" variant="soft">
              Abbrechen
            </Button>
          </Action>
        </ActionGroup>
      </Modal>
    </>
  );
}
```


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `selectionMode` | `ContextMenuSelectionMode` | - | The type of selection that is allowed in the context menu. |
| `width` | `string \| number` | - | Sets the context menu to a fixed width. |
| `children` | `ReactNode` | - | - |
| `offset` | `number` | `8` | The additional offset applied along the main axis between the element and its anchor element. |
| `translate` | `"yes" \| "no"` | - | - |
| `arrowBoundaryOffset` | `number` | `0` | The minimum distance the arrow's edge should be from the edge of the overlay element. |
| `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. |
| `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. |
| `isEntering` | `boolean` | - | Whether the popover is currently performing an entry animation. |
| `isExiting` | `boolean` | - | Whether the popover is currently performing an exit animation. |
| `UNSTABLE_portalContainer` _(deprecated)_ | `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. |
| `placement` | `Placement` | `'bottom'` | The placement of the element with respect to its anchor element. |
| `containerPadding` | `number` | `12` | The placement padding that should be applied between the element and its surrounding container. |
| `crossOffset` | `number` | `0` | The additional offset applied along the cross axis between the element and its anchor element. |
| `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. |
| `isOpen` | `boolean` | - | Whether the overlay is open by default (controlled). |
| `defaultOpen` | `boolean` | - | Whether the overlay is open by default (uncontrolled). |
| `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. |
| `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. |
| `dir` | `string` | - | - |
| `lang` | `string` | - | - |
| `hidden` | `boolean` | - | - |
| `inert` | `boolean` | - | - |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | - |
| `ref` | `Ref<HTMLSpanElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see [React Docs](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |
| `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. |
| `boundaryElement` | `Element` | `document.body` | Element that that serves as the positioning boundary. |
| `arrowRef` | `RefObject<Element>` | - | A ref for the popover arrow element. |
| `scrollRef` | `RefObject<Element>` | `overlayRef` | A ref for the scrollable region within the overlay. |
| `shouldUpdatePosition` | `boolean` | `true` | Whether the overlay should update its position automatically. |
| `maxHeight` | `number` | - | The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height. |
| `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. |
| `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. |
| `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. |
| `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. |
| `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. |
| `isDialogContent` | `boolean` | - | Whether the popover contains a dialog. |
| `controller` | `OverlayController` | - | An overlay controller to control the popover state. |
| `disabledKeys` | `Iterable<Key>` | - | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| `selectedKeys` | `"all" \| Iterable<Key>` | - | The currently selected keys in the collection (controlled). |
| `defaultSelectedKeys` | `"all" \| Iterable<Key>` | - | The initial selected keys in the collection (uncontrolled). |
| `renderEmptyState` | `(() => ReactNode)` | - | Provides content to display when there are no items in the list. |

### Events

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `onOpenChange` | `((isOpen: boolean) => void)` | - | Handler that is called when the overlay's open state changes. |
| `onClick` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onClickCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onAuxClick` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onAuxClickCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onContextMenu` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onContextMenuCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onDoubleClick` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onDoubleClickCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseDown` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseDownCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseEnter` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseLeave` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseMove` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseMoveCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseOut` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseOutCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseOver` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseOverCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseUp` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onMouseUpCapture` | `MouseEventHandler<HTMLDivElement>` | - | - |
| `onTouchCancel` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchCancelCapture` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchEnd` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchEndCapture` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchMove` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchMoveCapture` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchStart` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onTouchStartCapture` | `TouchEventHandler<HTMLDivElement>` | - | - |
| `onPointerDown` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerDownCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerMove` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerMoveCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerUp` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerUpCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerCancel` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerCancelCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerEnter` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerLeave` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerOver` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerOverCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerOut` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onPointerOutCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onGotPointerCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onGotPointerCaptureCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onLostPointerCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onLostPointerCaptureCapture` | `PointerEventHandler<HTMLDivElement>` | - | - |
| `onScroll` | `UIEventHandler<HTMLDivElement>` | - | - |
| `onScrollCapture` | `UIEventHandler<HTMLDivElement>` | - | - |
| `onWheel` | `WheelEventHandler<HTMLDivElement>` | - | - |
| `onWheelCapture` | `WheelEventHandler<HTMLDivElement>` | - | - |
| `onAnimationStart` | `AnimationEventHandler<HTMLDivElement>` | - | - |
| `onAnimationStartCapture` | `AnimationEventHandler<HTMLDivElement>` | - | - |
| `onAnimationEnd` | `AnimationEventHandler<HTMLDivElement>` | - | - |
| `onAnimationEndCapture` | `AnimationEventHandler<HTMLDivElement>` | - | - |
| `onAnimationIteration` | `AnimationEventHandler<HTMLDivElement>` | - | - |
| `onAnimationIterationCapture` | `AnimationEventHandler<HTMLDivElement>` | - | - |
| `onTransitionCancel` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionCancelCapture` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionEnd` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionEndCapture` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionRun` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionRunCapture` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionStart` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onTransitionStartCapture` | `TransitionEventHandler<HTMLDivElement>` | - | - |
| `onSelectionChange` | `((keys: Selection) => void)` | - | Handler that is called when the selection changes. |
| `onAction` | `((key: Key, value: MenuItemProps) => void)` | - | Handler that is called when an item is selected. |

### Accessibility

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |
| `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. |


## Guidelines

# Grundlagen

## Best practices

Achte bei der Verwendung von einem ContextMenu darauf, dass ...

- nur kontextrelevante Inhalte angezeigt werden.
- die Aktionen klar benannt und gut verständlich sind.
- häufig genutzte Aktionen oben stehen und leicht erreichbar sind.
- bei Bedarf Gruppierungen - z. B. durch eine
  [Section](/04-components/structure/section/overview) oder einen einzelnen
  [Separator](/04-components/structure/separator/overview) - verwendet werden,
  um die Übersichtlichkeit zu erhöhen.
- interaktive Elemente (z. B.
  [Checkbox](/04-components/form-controls/checkbox/overview),
  [RadioGroup](/04-components/form-controls/radio-group/overview) oder
  [Switch](/04-components/form-controls/switch/overview)) nur verwendet werden,
  wenn die Aktionen sofort wirksam sind, häufig benötigt werden und der Zustand
  direkt erkennbar ist.

## Verwendung

Verwende ein ContextMenu, um ...

- die Benutzeroberfläche aufgeräumt zu halten, indem Aktionen nur bei Bedarf
  eingeblendet werden.
- sekundäre Aktionen, Profi-Tools oder 'Quick-Actions' platzsparend
  darzustellen.
- elementbezogene Aktionen für [Listen](/04-components/structure/list/overview)
  anzubieten (z. B. Details anzeigen, Status ändern oder löschen).
- Filter mit einer Mehrfach-Auswahl durch Checkboxen anzubieten.
- Aktionen durch einen Switch zu aktivieren oder deaktivieren.
- eine Sortierung mit einer Einfach-Auswahl durch Radios anzuzeigen.