Dropdown Menu
Presence Menu
A status menu: the dot on the avatar mirrors the chosen status, so the state stays visible with the menu closed, and the list itself is a radio group with a note under every option.
What you can change
- the name through name — the initials come from it too
- the status list through statuses: value, label, hint and hue on each
- the chosen status through status and the list heading through title
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/dropdown-021?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
One file, zero dependencies, the --vibeui-dropdown-021-* palette. A server component: the HTML popover holds the open state and CSS anchor positioning inside @supports places it. The dot's hue comes from the --vibeui-dropdown-021-hue variable set from the chosen status, so one dot serves every option. The list is a radio group inside its own <form>: radio buttons group by form owner and name, and without the form two such menus on a page would merge into one group. The group name is built from the id prop to avoid useId and stay a server component. The inputs themselves are hidden but stay in the focus order: the label draws the outline through :has(input:focus-visible) and the tick through :has(input:checked).
Tags
- menu
- dropdown
- status
- presence
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…