Menu

Meny, menylist, kontextmeny

Storybook

React Aria

En meny kan användas för att samla ihop funktioner som sällan används eller som kompletterar nuvarande funktion.

import { MenuTrigger } from 'react-aria-components'
import { Button, Menu, MenuItem, MenuPopover } from '@midas-ds/components'
import { MenuIcon } from 'lucide-react'

<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 rätt komponent från rätt paket.

Midas exporterar följande komponenter och typer:

• Menu & MenuProps
• MenuItem & MenuItemProps
• MenuPopover & MenuPopoverProps
• MenuSection & MenuSectionProps
• Separator & SeparatorProps

MenuTrigger importeras från react-aria-components.

Länkar

I React Arias dokumentation visas exempel på hur menyn kan innehålla länkar, länkarna uppfyller inte våra krav på tillgänglighet och ska därför undvikas.

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.