DropdownMenu

About #

Menu from Reakit with a really nice theme 👀

Usage #

function() {
  const menu = useDropdownMenuState({
    gutter: 10
  })

  const handleClick = e => {
    console.log(`Clicked on ${e.target.innerText}`)
    menu.hide()
  }

  return (
    <>
      <DropdownMenu.Trigger {...menu} as={Button}>
        Dropdown Menu
      </DropdownMenu.Trigger>
      <DropdownMenu {...menu} aria-label="Example">
        <DropdownMenu.Item {...menu} onClick={handleClick}>
          Twitter
        </DropdownMenu.Item>
        <DropdownMenu.Item {...menu} onClick={handleClick} disabled>
          Facebook
        </DropdownMenu.Item>
        <DropdownMenu.Item {...menu} onClick={handleClick}>
          Instagram
        </DropdownMenu.Item>
        <DropdownMenu.Separator {...menu} />
        <DropdownMenu.Item {...menu} onClick={handleClick}>
          Github
        </DropdownMenu.Item>
      </DropdownMenu>
    </>
  )
}
Copy

...or with more complexity

function() {
  const menu = useDropdownMenuState({ gutter: 10, placement: 'bottom-end' })

  const handleClick = e => {
    console.log(`Clicked on ${e.target.innerText}`)
    menu.hide()
  }

  return (
    <Box position="relative">
      <ButtonGroup variant="tertiary">
        <Button onClick={handleClick}>
          <AddIcon />
          <span>First Action</span>
        </Button>
        <DropdownMenu.Trigger {...menu} as={Button}>
          {menu.visible ? <UpIcon /> : <DownIcon />}
        </DropdownMenu.Trigger>
      </ButtonGroup>
      <DropdownMenu {...menu} aria-label="Complexity">
        <DropdownMenu.Item {...menu} onClick={handleClick}>
          <TrashIcon mr="sm" size="sm" />
          <Box>Second Action</Box>
        </DropdownMenu.Item>
        <DropdownMenu.Item {...menu} onClick={handleClick}>
          <AttachmentIcon mr="sm" size="sm" />
          <Box>Third Action</Box>
        </DropdownMenu.Item>
      </DropdownMenu>
    </Box>
  )
}
Copy

Arrow #

Use DropdownMenu.Arrow to add an arrow to the dropdown menu

function() {
  const menu = useDropdownMenuState({
    gutter: 10
  })

  const handleClick = e => {
    console.log(`Clicked on ${e.target.innerText}`)
    menu.hide()
  }

  return (
    <>
      <DropdownMenu.Trigger {...menu} as={Button}>
        Dropdown Menu
      </DropdownMenu.Trigger>
      <DropdownMenu {...menu} aria-label="Example">
        <DropdownMenu.Arrow {...menu} />
        <DropdownMenu.Item {...menu} onClick={handleClick}>
          Twitter
        </DropdownMenu.Item>
        <DropdownMenu.Item {...menu} onClick={handleClick} disabled>
          Facebook
        </DropdownMenu.Item>
        <DropdownMenu.Item {...menu} onClick={handleClick}>
          Instagram
        </DropdownMenu.Item>
        <DropdownMenu.Separator {...menu} />
        <DropdownMenu.Item {...menu} onClick={handleClick}>
          Github
        </DropdownMenu.Item>
      </DropdownMenu>
    </>
  )
}
Copy

Properties #

Packages #

Dependencies #

Peer dependencies #