Menu suspenso

Um menu popover composable construído no React Aria - onde o Select escolhe um valor no gatilho, o Dropdown é um painel de forma livre de linhas de ação agrupadas com a superfície do BoardUI (rádio 16, sombra dropdown) e a escala de 150ms + borrão aparecem animação. A mesma receita atrás da equipe da barra lateral do painel e menus de contas e o menu de adição do compositor de chat de IA.

Instalação

Você pode adicionar este componente suspenso usando o nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

CLI

Manual

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add dropdown

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Selector de modelos

O menu modelo do compositor de chat de IA: linhas funcionam como um grupo de rádio - selecionado mantém a linha atual realçada e um glifo de rádio fica no fim da linha via justify-between.

{/* Radio-group rows: selected state on the row + a radio glyph at the end */}const [model, setModel] = useState("Fable 5");
<Dropdown isOpen={isOpen} onOpenChange={setIsOpen}>  <DropdownTrigger className="…pill trigger with the current model + chevron…">    {model}    <ChevronDownSmall className={cx("size-4", isOpen && "rotate-180")} />  </DropdownTrigger>
  <DropdownPopover aria-label="Models" placement="bottom start">    <DropdownGroup label="Models">      <div role="radiogroup" aria-label="Model" className="flex w-full flex-col gap-1">        {MODELS.map((name) => (          <DropdownItem            key={name}            selected={name === model}            onSelect={() => {              setModel(name);              setIsOpen(false);            }}            className="justify-between gap-2.5"          >            <span className="truncate text-body-medium text-text-primary">{name}</span>            <RadioDot selected={name === model} />          </DropdownItem>        ))}      </div>    </DropdownGroup>  </DropdownPopover></Dropdown>

Menu de equipe

Menu de cartas de equipe da barra lateral: um cabeçalho e rodapé ao lado DropdownGroups como irmãos simples, fileiras carregam crachás de rastreamento, e DropdownDivider sangra através do revestimento do painel entre secções.

{/* Header, grouped rows with counters, and a footer in one panel */}<Dropdown isOpen={isOpen} onOpenChange={setIsOpen}>  <DropdownTrigger aria-label="Board team" className="…team card styles…">    <Avatar size="md" color="blue" src="/logo.png" alt="Board team" />    …name, email, chevron…  </DropdownTrigger>
  <DropdownPopover aria-label="Board team menu" className="w-[265px]" dialogClassName="gap-[7px]">    <div className="flex items-center gap-2 px-2 pt-1">      <Avatar size="md" color="blue" src="/logo.png" alt="Board team" />      …name + email…    </div>
    <DropdownGroup>      <DropdownItem onSelect={close}>        <span className="flex min-w-0 flex-1 items-center gap-2">          <RiMessage2Line className="size-5 text-foreground-icon-secondary" aria-hidden />          <span className="truncate text-body-medium text-text-primary">Messages</span>        </span>        <Counter color="neutral" className="bg-team-menu-count-background text-team-menu-count-foreground">94</Counter>      </DropdownItem>    </DropdownGroup>
    <DropdownDivider />
    <DropdownGroup label="Company">…</DropdownGroup>  </DropdownPopover></Dropdown>

Menu Conta

Comutador de contas da barra lateral: as linhas renderizam avatares em vez de ícones, e o painel fecha com um par de botões secundários - o conteúdo da linha é de forma livre, então tudo vai para dentro de uma DropdownItem.

{/* Row content is free-form: avatars, then buttons below a divider */}<DropdownPopover aria-label="Account menu" className="w-[265px]">  <DropdownGroup label="Users with access">    {users.map((user) => (      <DropdownItem key={user.name} onSelect={close} className="px-2 py-1.5">        <Avatar size="xs" color={user.color} initials={user.initials} />        <span className="truncate text-body-medium text-text-primary">{user.name}</span>      </DropdownItem>    ))}  </DropdownGroup>
  <DropdownDivider className="my-3.5" />
  <div className="flex items-center gap-3 px-2 pb-2">    <Button variant="secondary" size="small" leadingIcon={RiAddFill} className="flex-1">      Add user    </Button>    <Button variant="secondary" size="small" leadingIcon={RiEqualizer3Line} className="flex-1">      Manage    </Button>  </div></DropdownPopover>