ドロップダウン

React Aria に組み込まれたコンポジブルなポップアップメニュー - Select は、そのトリガーに値を選ぶ、Dropdown は、BoardUI の表面(半径16、ドロップダウンシャドウ)と 150ms のスケール + ぼくらがアニメーションを表示するグループ化されたアクション行のフリーフォームパネルです。ダッシュボードのサイドバーのチームとアカウントメニューの背後にある同じレシピと、AI チャットのコンポーザーはメニューを追加します。

インストール

CLI または手動でこのドロップダウンコンポーネントを追加できます。

ダークモード対応：このコンポーネントはBoardUIのセマンティックトークンに合わせて自動で切り替わります。テーマスイッチの設定.

CLI

手動

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add dropdown

共有UIパッケージや独自のインポートエイリアスを使う場合は、インストールパスの設定をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。

モデルピッカー

AIチャットコンポーザーのモデルメニュー: 行はラジオグループとして機能します - 選択する 現在の行を強調し、ラジオのグリフは行の端を経由して座っています 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>

チームメニュー

サイドバーのチームカードメニュー:ヘッダとフッターが一緒にライブ DropdownGroups は明白な兄弟として、行はバッジを追跡し、 DropdownDivider セクション間のパネルのパディングを通して傷。

{/* 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>

口座メニュー

サイドバーのアカウントのスイッチャー: 行は、アイコンの代わりにアバターをレンダリングし、パネルはセカンダリボタンのペアで閉じます - 行のコンテンツはフリーフォームなので、何も内部に行きます 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>