Lemonade Design System

Utilizado para revelar uma lista de opções ou comandos ocultos. No cabeçalho, é geralmente utilizado para navegação, onde uma ação leva o usuário para outra página.

Boas práticas

Não remova itens da lista se essa ação não estiver disponível. Neste caso, mantenha o item desabilitado.
Não coloque muitos itens na lista. Caso precise de muitas opções, considere utilizar outro tipo de cabeçalho/menu.

Exemplo

import { Button, Dropdown, DropdownDivider, DropdownItem, Tooltip } from '@lemonade/ui'
import React, { useState } from 'react'

export default function DropdownExample() {
  const [buttonRef, setButtonRef] = useState<HTMLButtonElement>()
  const [open, setOpen] = useState(false)

  const handleClick = () => setOpen(true)
  const handleClose = () => setOpen(false)

  return (
    <>
      <Button innerRef={setButtonRef} onClick={handleClick} size='small' kind='primary' skin='outline'>
        Options
      </Button>

      <Dropdown anchorRef={buttonRef} open={open} onClose={handleClose} popperProps={{ placement: 'bottom' }}>
        <DropdownItem onClick={console.log}>Item #1</DropdownItem>
        <Tooltip text='Disabled item'>
          <DropdownItem onClick={console.log} disabled>
            Item #2
          </DropdownItem>
        </Tooltip>
        <DropdownDivider />
        <DropdownItem component='a' href='/'>
          Link item
        </DropdownItem>
        <DropdownItem type='danger' onClick={console.log}>
          Item #3
        </DropdownItem>
      </Dropdown>
    </>
  )
}