Dropdown

A dropdown menu displays a list of actions or options that a user can choose from.

Component preview

Simple dropdown menu with items and separators

import * as UI from "@iyk/ui"

export default function Example() {
  return (
    <div className="flex flex-col gap-4">
      <UI.Dropdown.Root>
        <UI.Dropdown.Trigger asChild>
          <UI.Button type="button" kind="solid" size="sm">
            Open Menu
          </UI.Button>
        </UI.Dropdown.Trigger>
        <UI.Dropdown.Portal>
          <UI.Dropdown.Content>
            <UI.Dropdown.Item>Item 1</UI.Dropdown.Item>
            <UI.Dropdown.Item>Item 2</UI.Dropdown.Item>
            <UI.Dropdown.Separator />
            <UI.Dropdown.Item asChild>
              <a href="#">Item 3 (link)</a>
            </UI.Dropdown.Item>
          </UI.Dropdown.Content>
        </UI.Dropdown.Portal>
      </UI.Dropdown.Root>
    </div>
  )
}

Avatar Items

Dropdown menu with avatar items

import * as UI from "@iyk/ui"

const avatars = [
  "https://www.imgz.app/400x300?format=png&bg=00b8f2-00ff75-left",
  "https://www.imgz.app/400x300?format=png&bg=002ef2-00f7ff-left",
]

export default function AvatarExample() {
  return (
    <div className="flex flex-col gap-4">
      <UI.Dropdown.Root>
        <UI.Dropdown.Trigger asChild>
          <UI.Button type="button" kind="solid" size="sm">
            Open Menu
          </UI.Button>
        </UI.Dropdown.Trigger>
        <UI.Dropdown.Portal>
          <UI.Dropdown.Content>
            <UI.Dropdown.AvatarItem src={avatars[0]} variant="square">
              Team 1
            </UI.Dropdown.AvatarItem>
            <UI.Dropdown.AvatarItem src={avatars[1]} variant="square">
              Team 2
            </UI.Dropdown.AvatarItem>
            <UI.Dropdown.Separator />
            <UI.Dropdown.AvatarItem src={avatars[0]} variant="circle">
              User 1
            </UI.Dropdown.AvatarItem>
            <UI.Dropdown.AvatarItem src={avatars[1]} variant="circle">
              User 2
            </UI.Dropdown.AvatarItem>
            <UI.Dropdown.Separator />
            <UI.Dropdown.Item asChild>
              <a href="#">Logout</a>
            </UI.Dropdown.Item>
          </UI.Dropdown.Content>
        </UI.Dropdown.Portal>
      </UI.Dropdown.Root>
    </div>
  )
}

Radio group and items

Dropdown menu with radio group and items, indicator can be on the left or right

import * as UI from "@iyk/ui"
import { useState } from "react"

export default function RadioExample() {
  const [value, setValue] = useState("1")

  return (
    <div className="flex flex-col gap-4">
      <UI.Dropdown.Root>
        <UI.Dropdown.Trigger asChild>
          <UI.Button type="button" kind="solid" size="sm">
            Open Menu
          </UI.Button>
        </UI.Dropdown.Trigger>
        <UI.Dropdown.Portal>
          <UI.Dropdown.Content>
            <UI.Dropdown.RadioGroup indicatorSide="left" value={value} onValueChange={setValue}>
              <UI.Dropdown.RadioItem value="1">Left Indicator 1</UI.Dropdown.RadioItem>
              <UI.Dropdown.RadioItem value="2">Left Indicator 2</UI.Dropdown.RadioItem>
              <UI.Dropdown.RadioItem value="3">Left Indicator 3</UI.Dropdown.RadioItem>
            </UI.Dropdown.RadioGroup>
            <UI.Dropdown.Separator />
            <UI.Dropdown.RadioGroup indicatorSide="right" value={value} onValueChange={setValue}>
              <UI.Dropdown.RadioItem value="1">Right Indicator 1</UI.Dropdown.RadioItem>
              <UI.Dropdown.RadioItem value="2">Right Indicator 2</UI.Dropdown.RadioItem>
              <UI.Dropdown.RadioItem value="3">Right Indicator 3</UI.Dropdown.RadioItem>
            </UI.Dropdown.RadioGroup>
          </UI.Dropdown.Content>
        </UI.Dropdown.Portal>
      </UI.Dropdown.Root>
    </div>
  )
}

Radio group and avatar items

Dropdown menu with radio group and avatar items, indicator should be on the right

import * as UI from "@iyk/ui"
import { useState } from "react"

const avatars = [
  "https://www.imgz.app/400x300?format=png&bg=00b8f2-00ff75-left",
  "https://www.imgz.app/400x300?format=png&bg=002ef2-00f7ff-left",
]

export default function RadioAvatarExample() {
  const [value, setValue] = useState("1")

  return (
    <div className="flex flex-col gap-4">
      <UI.Dropdown.Root>
        <UI.Dropdown.Trigger asChild>
          <UI.Button type="button" kind="solid" size="sm">
            Open Menu
          </UI.Button>
        </UI.Dropdown.Trigger>
        <UI.Dropdown.Portal>
          <UI.Dropdown.Content>
            <UI.Dropdown.RadioGroup indicatorSide="right" value={value} onValueChange={setValue}>
              <UI.Dropdown.RadioAvatarItem value="1" src={avatars[0]} variant="square">
                Team 1
              </UI.Dropdown.RadioAvatarItem>
              <UI.Dropdown.RadioAvatarItem value="2" src={avatars[1]} variant="square">
                Team 2
              </UI.Dropdown.RadioAvatarItem>
            </UI.Dropdown.RadioGroup>
          </UI.Dropdown.Content>
        </UI.Dropdown.Portal>
      </UI.Dropdown.Root>
    </div>
  )
}