Presentational parts for a dropdown menu: a styled container (Dropdown.Items) and anchor-based menu items (Dropdown.Item). It provides styling and item semantics only — pair it with a headless behaviour/positioning layer such as @headlessui/react's Menu.

When to use

Use Dropdown when you need the visual menu panel and items but are driving open/close and positioning with Headless UI (or similar). It does not position itself — there is no @floating-ui logic here.

For a full floating panel with built-in open/dismiss behaviour, use Popover.
For app navigation (sidebar-style, active-route aware), use Menu.

There is no @uxf/form twin.

Usage

Grounded in the story — Headless UI Menu handles state and positioning; Dropdown supplies the styled surface:

import { Menu as HUIMenu } from "@headlessui/react";
import { CLASSES } from "@uxf/core/constants/classes";
import { Button } from "@uxf/ui/button";
import { Dropdown } from "@uxf/ui/dropdown";

const items = [
    { id: 1, title: "Test 1" },
    { id: 2, title: "Test 2" },
];

<HUIMenu as="div" className="relative">
    <HUIMenu.Button as={Button} color="positive">
        Click me
    </HUIMenu.Button>
    <HUIMenu.Items as={Dropdown.Items}>
        {items.map((item) => (
            <HUIMenu.Item key={item.id}>
                {({ active }) => (
                    <Dropdown.Item className={active ? CLASSES.IS_ACTIVE : ""}>{item.title}</Dropdown.Item>
                )}
            </HUIMenu.Item>
        ))}
    </HUIMenu.Items>
</HUIMenu>;

API

Import: import { Dropdown } from "@uxf/ui/dropdown".

`Dropdown.Items`

The menu panel — a <div className="uxf-dropdown"> that forwards its ref. Accepts standard HTMLAttributes<HTMLDivElement> (className, role, children, …); the passed role is forwarded to the div. (The exported DropdownItemsProps type is the ref element type HTMLDivElement, not the props type.)

`Dropdown.Item`

A single item, rendered as an <a> (or a Next.js link via as) with role="menuitem" and class uxf-dropdown__item.

DropdownItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> (minus type) plus UseAnchorProps:

Prop	Type	Default	Description
`as`	`"a" \| NextLink`	`"a"`	Element to render. Pass a Next.js `Link` for client-side navigation.
`isDisabled`	`boolean`	`false`	Non-interactive state (adds the disabled class, drops it from tab order).
`isLoading`	`boolean`	`false`	Busy state.
`analyticsCallback`	`() => void`	—	Called when the item is activated.
`type`	`"submit"`	—	Submit the closest `<form>` on activation; the only accepted `type`.

Standard anchor attributes (href, onClick, className, children, …) are also accepted.

Variants & states

Item state is driven by classes on uxf-dropdown__item (typically supplied by the headless layer's render props):

Class	Meaning
`is-active`	Highlighted / keyboard-active item. Use `CLASSES.IS_ACTIVE` from `@uxf/core/constants/classes`.
`is-selected`	Currently selected value.
`is-disabled`	Disabled item.

The stylesheet also defines a uxf-dropdown__items class that is deprecated — use Dropdown.Items (which renders uxf-dropdown).

Requirements

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/dropdown.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

Default

Open in new tab