<MenuTrigger>
  <Button
    aria-label='Menu'
    variant='icon'
  >
    <MenuIcon size={20} />
  </Button>
  <MenuPopover>
    <Menu>
      <MenuItem>Open</MenuItem>
      <MenuItem>Rename...</MenuItem>
      <MenuItem>Duplicate</MenuItem>
      <MenuItem>Share...</MenuItem>
      <MenuItem>Delete...</MenuItem>
    </Menu>
  </MenuPopover>
</MenuTrigger>

Beskrivning

Komponenten bygger på React Aria Menu, kodexempel i React Arias dokumentation är applicerbara genom att importera komponeterna från @midas-ds/components.

Midas exporterar följande komponenter och typer:

Menu & MenuProps
MenuItem & MenuItemProps
MenuPopover & MenuPopoverProps
MenuSection & MenuSectionProps
Separator & SeparatorProps
MenuTrigger & MenuTriggerProps

Hantera handlingar

onAction

Använd onAction på Menu för att lyssna på vilket menyval användaren väljer. Callbacken tar emot id-värdet från det valda MenuItem-elementet — se till att sätta ett id på varje MenuItem.

<Menu onAction={key => console.log(key)}>
  <MenuItem id='open'>Open</MenuItem>
  <MenuItem id='rename'>Rename...</MenuItem>
</Menu>

onAction kan också sättas direkt på ett enskilt MenuItem om du vill koppla specifik logik till ett alternativ:

<Menu>
  <MenuItem id='open' onAction={() => openFile()}>Open</MenuItem>
  <MenuItem id='delete' onAction={() => deleteFile()}>Delete...</MenuItem>
</Menu>

Länkar

React Arias dokumentation visar exempel på hur menyn kan innehålla länkar. Länkar i en meny är tillåtna så länge menyns syfte är tydligt för användaren, exempelvis en meny som blandar handlingar med kontextuella länkar som "Öppna i nytt fönster" eller "Gå till inställningar".

Riktlinjer

Använd endast till sekundära handlingar som inte är högt prioriterade.
Knappen ska helst ha en titel, annars bör en aria-label användas.

API

Name	Type	Default	Description
`size`	`Size`	`large`	Component size (large: height 40px, medium: height 32px)
`className`	`ClassNameOrFunction<MenuRenderProps>`	`'react-aria-Menu'`	The CSS className for the element. A function may be provided to compute the class based on component state.
`renderEmptyState`	`(() => ReactNode)`	-	Provides content to display when there are no items in the menu.
`shouldCloseOnSelect`	`boolean`	-	Whether the menu should close when the menu item is selected.
`disabledKeys`	`Iterable<Key>`	-	The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
`items`	`Iterable<T>`	-	Item objects in the collection.
`autoFocus`	`FocusStrategy \| boolean`	-	Where the focus should be set.
`selectionMode`	`SelectionMode`	-	The type of selection that is allowed in the collection.
`shouldFocusWrap`	`boolean`	-	Whether keyboard navigation is circular.
`escapeKeyBehavior`	`"clearSelection" \| "none"`	`'clearSelection'`	Whether pressing the escape key should clear selection in the menu or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually.
`disallowEmptySelection`	`boolean`	-	Whether the collection allows empty selection.
`selectedKeys`	`"all" \| Iterable<Key>`	-	The currently selected keys in the collection (controlled).
`defaultSelectedKeys`	`"all" \| Iterable<Key>`	-	The initial selected keys in the collection (uncontrolled).
`children`	`((item: T) => ReactNode) \| ReactNode`	-	The contents of the collection.
`dependencies`	`readonly any[]`	-	Values that should invalidate the item cache when using dynamic collections.
`style`	`StyleOrFunction<MenuRenderProps>`	-	The inline style for the element. A function may be provided to compute the style based on component state.
`render`	`DOMRenderFunction<"div", MenuRenderProps>`	-	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.
`slot`	`string \| null`	-	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.

Name	Type	Description
`onAction`	`((key: Key, value: T) => void)`	Handler that is called when an item is selected.
`onSelectionChange`	`((keys: Selection) => void)`	Handler that is called when the selection changes.
`onClose`	`(() => void)`	Handler that is called when the menu should close after selecting an item.

MenuItem

Name	Type	Default	Description
`className`	`ClassNameOrFunction<MenuItemRenderProps>`	`'react-aria-MenuItem'`	The CSS className for the element. A function may be provided to compute the class based on component state.
`id`	`Key`	-	The unique id of the item.
`value`	`object`	-	The object value that this item represents. When using dynamic collections, this is set automatically.
`textValue`	`string`	-	A string representation of the item's contents, used for features like typeahead.
`isDisabled`	`boolean`	-	Whether the item is disabled.
`shouldCloseOnSelect`	`boolean`	-	Whether the menu should close when the menu item is selected.
`children`	`ChildrenOrFunction<MenuItemRenderProps>`	-	The children of the component. A function may be provided to alter the children based on component state.
`style`	`StyleOrFunction<MenuItemRenderProps>`	-	The inline style for the element. A function may be provided to compute the style based on component state.
`render`	`((props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> \| DetailedHTMLProps<LinkWithRequiredHref, HTMLAnchorElement>, renderProps: MenuItemRenderProps) => ReactElement<...>)`	-	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. Note: You can check if `'href' in props` in order to tell whether to render an `<a>` element. Requirements: You must render the expected element type (e.g. if `<a>` is expected, you cannot render a `<button>`). 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.

Name	Type	Description
`onAction`	`(() => void)`	Handler that is called when the item is selected.
`onHoverStart`	`((e: HoverEvent) => void)`	Handler that is called when a hover interaction starts.
`onHoverEnd`	`((e: HoverEvent) => void)`	Handler that is called when a hover interaction ends.
`onHoverChange`	`((isHovering: boolean) => void)`	Handler that is called when the hover state changes.
`onFocus`	`((e: FocusEvent<Element, Element>) => void)`	Handler that is called when the element receives focus.
`onBlur`	`((e: FocusEvent<Element, Element>) => void)`	Handler that is called when the element loses focus.
`onFocusChange`	`((isFocused: boolean) => void)`	Handler that is called when the element's focus status changes.
`onPress`	`((e: PressEvent) => void)`	Handler that is called when the press is released over the target.
`onPressStart`	`((e: PressEvent) => void)`	Handler that is called when a press interaction starts.
`onPressEnd`	`((e: PressEvent) => void)`	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
`onPressChange`	`((isPressed: boolean) => void)`	Handler that is called when the press state changes.
`onPressUp`	`((e: PressEvent) => void)`	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
`onClick`	`((e: MouseEvent<FocusableElement, MouseEvent>) => void)`	Not recommended – use `onPress` instead. `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions.

Name	Type		Description
`aria-label`	`string`		An accessibility label for this item.

MenuPopover

Name	Type	Default	Description
`className`	`ClassNameOrFunction<PopoverRenderProps>`	`'react-aria-Popover'`	The CSS className for the element. A function may be provided to compute the class based on component state.
`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 \| null>`	-	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.
`shouldSkipAnimation`	`boolean`	-	Whether the popover should appear and disappear without an entry or exit animation. This is used by components such as PreviewTrigger to skip animations when quickly swapping between overlays.
`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.
`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.
`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.
`boundaryElement`	`Element`	`document.body`	Element that that serves as the positioning boundary.
`arrowRef`	`RefObject<Element \| null>`	-	A ref for the popover arrow element.
`scrollRef`	`RefObject<Element \| null>`	`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.
`arrowBoundaryOffset`	`number`	`0`	The minimum distance the arrow's edge should be from the edge of the overlay element.
`getTargetRect`	`((target: Element) => DOMRect \| null)`	`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.
`isOpen`	`boolean`	-	Whether the overlay is open by default (controlled).
`defaultOpen`	`boolean`	-	Whether the overlay is open by default (uncontrolled).
`children`	`ChildrenOrFunction<PopoverRenderProps>`	-	The children of the component. A function may be provided to alter the children based on component state.
`style`	`StyleOrFunction<PopoverRenderProps>`	-	The inline style for the element. A function may be provided to compute the style based on component state.
`render`	`DOMRenderFunction<"div", PopoverRenderProps>`	-	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.
`slot`	`string \| null`	-	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.

Name	Type	Description
`onFocusWithin`	`((e: FocusEvent<Element, Element>) => void)`	Handler that is called when the target element or a descendant receives focus.
`onBlurWithin`	`((e: FocusEvent<Element, Element>) => void)`	Handler that is called when the target element and all descendants lose focus.
`onFocusWithinChange`	`((isFocusWithin: boolean) => void)`	Handler that is called when the the focus within state changes.
`onOpenChange`	`((isOpen: boolean) => void)`	Handler that is called when the overlay's open state changes.

MenuSection

Name	Type	Default	Description
`className`	`string`	`'react-aria-MenuSection'`	The CSS className for the element.
`shouldCloseOnSelect`	`boolean`	-	Whether the menu should close when the menu item is selected.
`id`	`Key`	-	The unique id of the section.
`value`	`object`	-	The object value that this section represents. When using dynamic collections, this is set automatically.
`children`	`((item: T) => ReactElement<unknown, string \| JSXElementConstructor<any>>) \| ReactNode`	-	Static child items or a function to render children.
`dependencies`	`readonly any[]`	-	Values that should invalidate the item cache when using dynamic collections.
`items`	`Iterable<T>`	-	Item objects in the section.
`style`	`CSSProperties`	-	The inline style for the element.
`selectionMode`	`SelectionMode`	-	The type of selection that is allowed in the collection.
`disallowEmptySelection`	`boolean`	-	Whether the collection allows empty selection.
`selectedKeys`	`"all" \| Iterable<Key>`	-	The currently selected keys in the collection (controlled).
`defaultSelectedKeys`	`"all" \| Iterable<Key>`	-	The initial selected keys in the collection (uncontrolled).
`render`	`DOMRenderFunction<"section", undefined>`	-	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.

Name	Type		Description
`onSelectionChange`	`((keys: Selection) => void)`		Handler that is called when the selection changes.

Name	Type		Description
`aria-label`	`string`		An accessibility label for the section.

MenuTrigger

Name	Type	Default	Description
`trigger`	`MenuTriggerType`	`'press'`	How the menu is triggered.
`isOpen`	`boolean`	-	Whether the overlay is open by default (controlled).
`defaultOpen`	`boolean`	-	Whether the overlay is open by default (uncontrolled).

Name	Type		Description
`onOpenChange`	`((isOpen: boolean) => void)`		Handler that is called when the overlay's open state changes.

Separator

Name	Type	Default	Description
`className`	`string`	`'react-aria-Separator'`	The CSS className for the element.
`orientation`	`Orientation`	`'horizontal'`	The orientation of the separator.
`elementType`	`string`	-	The HTML element type that will be used to render the separator.
`style`	`CSSProperties`	-	The inline style for the element.
`slot`	`string \| null`	-	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.
`render`	`DOMRenderFunction<"div" \| "hr", undefined>`	-	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.

Menu

Beskrivning

Hantera handlingar

Länkar

Riktlinjer

API

Menu

Props

Events

MenuItem

Props

Events

Tillgänglighet

MenuPopover

Props

Events

MenuSection

Props

Events

Tillgänglighet

MenuTrigger

Props

Events

Separator

Props

Beskrivning​

Hantera handlingar​

Länkar​

Riktlinjer​

API​

Menu​

Props

Events

MenuItem​

Props

Events

Tillgänglighet

MenuPopover​

Props

Events

MenuSection​

Props

Events

Tillgänglighet

MenuTrigger​

Props

Events

Separator​

Props

Beskrivning

Hantera handlingar

Länkar

Riktlinjer

API

Menu

MenuItem

MenuPopover

MenuSection

MenuTrigger

Separator