Navigation

Dropdown menus for actions and links

Dropdowns expose grouped actions, navigation shortcuts, and icon rows from compact triggers. Use them in React toolbars and Next.js headers where space is limited but discoverability still matters.

Examples

Single-select closes the menu after a choice. Multi-select keeps the menu open and toggles checkmarks per item value.

Variant code examples

Each block matches one combination. Open “Show code” to copy the JSX; the leading comment names the variant row.

DropdownTrigger — variant × size

Three trigger variants with small, medium, and large sizes.

DropdownContent — placement

Surfaces position relative to the trigger on top, bottom, left, or right.

DropdownContent — spacing

The spacing between the items in the dropdown content.

CSS variable overrides

Override these dropdown variables on :root, a theme selector, or a component wrapper.

292 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-dropdown-trigger-ring-focus: oklch(55.1% 0.027 264.364 / 0.6);
  --zui-dropdown-trigger-default-bg: oklch(92.8% 0.006 264.531);
  --zui-dropdown-trigger-default-fg: oklch(20.8% 0.042 265.755);
  --zui-dropdown-trigger-outline-border: oklch(37.3% 0.034 259.733);
  --zui-dropdown-trigger-outline-fg: oklch(21% 0.034 264.665);
  --zui-dropdown-trigger-ghost-bg: transparent;
  --zui-dropdown-trigger-ghost-fg: oklch(21% 0.034 264.665);
  --zui-dropdown-trigger-white-bg: #ffffff;
  --zui-dropdown-trigger-white-fg: oklch(21% 0.034 264.665);
  --zui-dropdown-trigger-black-bg: #000000;
  --zui-dropdown-trigger-black-fg: #ffffff;
  --zui-dropdown-trigger-sky-border: oklch(44.3% 0.11 240.79);
  --zui-dropdown-trigger-sky-fg: oklch(44.3% 0.11 240.79);
  --zui-dropdown-trigger-rose-border: oklch(45.5% 0.188 13.697);
  --zui-dropdown-trigger-rose-fg: oklch(45.5% 0.188 13.697);
  --zui-dropdown-trigger-purple-border: oklch(43.8% 0.218 303.724);
  --zui-dropdown-trigger-purple-fg: oklch(43.8% 0.218 303.724);
  --zui-dropdown-trigger-pink-border: oklch(45.9% 0.187 3.815);
  --zui-dropdown-trigger-pink-fg: oklch(45.9% 0.187 3.815);
  --zui-dropdown-trigger-orange-border: oklch(47% 0.157 37.304);
  --zui-dropdown-trigger-orange-fg: oklch(47% 0.157 37.304);
  --zui-dropdown-trigger-yellow-border: oklch(47.6% 0.114 61.907);
  --zui-dropdown-trigger-yellow-fg: oklch(47.6% 0.114 61.907);
  --zui-dropdown-trigger-teal-border: oklch(43.7% 0.078 188.216);
  --zui-dropdown-trigger-teal-fg: oklch(43.7% 0.078 188.216);
  --zui-dropdown-trigger-indigo-border: oklch(39.8% 0.195 277.366);
  --zui-dropdown-trigger-indigo-fg: oklch(39.8% 0.195 277.366);
  --zui-dropdown-trigger-emerald-border: oklch(43.2% 0.095 166.913);
  --zui-dropdown-trigger-emerald-fg: oklch(43.2% 0.095 166.913);
  --zui-dropdown-trigger-gray-border: oklch(27.8% 0.033 256.848);
  --zui-dropdown-trigger-gray-fg: oklch(27.8% 0.033 256.848);
  --zui-dropdown-trigger-amber-border: oklch(47.3% 0.137 46.201);
  --zui-dropdown-trigger-amber-fg: oklch(47.3% 0.137 46.201);
  --zui-dropdown-trigger-violet-border: oklch(43.2% 0.232 292.759);
  --zui-dropdown-trigger-violet-fg: oklch(43.2% 0.232 292.759);
  --zui-dropdown-trigger-gradient-blue-from: oklch(42.4% 0.199 265.638);
  --zui-dropdown-trigger-gradient-blue-to: oklch(43.8% 0.218 303.724);
  --zui-dropdown-trigger-gradient-blue-fg: oklch(88.2% 0.059 254.128);
  --zui-dropdown-trigger-gradient-green-from: oklch(44.8% 0.119 151.328);
  --zui-dropdown-trigger-gradient-green-to: oklch(45.3% 0.124 130.933);
  --zui-dropdown-trigger-gradient-green-fg: oklch(92.5% 0.084 155.995);
  --zui-dropdown-trigger-gradient-red-from: oklch(44.4% 0.177 26.899);
  --zui-dropdown-trigger-gradient-red-to: oklch(45.9% 0.187 3.815);
  --zui-dropdown-trigger-gradient-red-fg: oklch(88.5% 0.062 18.334);
  --zui-dropdown-trigger-gradient-yellow-from: oklch(47.6% 0.114 61.907);
  --zui-dropdown-trigger-gradient-yellow-to: oklch(47% 0.157 37.304);
  --zui-dropdown-trigger-gradient-yellow-fg: oklch(94.5% 0.129 101.54);
  --zui-dropdown-trigger-gradient-purple-from: oklch(43.8% 0.218 303.724);
  --zui-dropdown-trigger-gradient-purple-to: oklch(45.9% 0.187 3.815);
  --zui-dropdown-trigger-gradient-purple-fg: oklch(90.2% 0.063 306.703);
  --zui-dropdown-trigger-gradient-teal-from: oklch(43.7% 0.078 188.216);
  --zui-dropdown-trigger-gradient-teal-to: oklch(45% 0.085 224.283);
  --zui-dropdown-trigger-gradient-teal-fg: oklch(91% 0.096 180.426);
  --zui-dropdown-trigger-gradient-indigo-from: oklch(39.8% 0.195 277.366);
  --zui-dropdown-trigger-gradient-indigo-to: oklch(43.8% 0.218 303.724);
  --zui-dropdown-trigger-gradient-indigo-fg: oklch(87% 0.065 274.039);
  --zui-dropdown-trigger-gradient-pink-from: oklch(45.9% 0.187 3.815);
  --zui-dropdown-trigger-gradient-pink-to: oklch(45.5% 0.188 13.697);
  --zui-dropdown-trigger-gradient-pink-fg: oklch(89.9% 0.061 343.231);
  --zui-dropdown-trigger-gradient-orange-from: oklch(47% 0.157 37.304);
  --zui-dropdown-trigger-gradient-orange-to: oklch(44.4% 0.177 26.899);
  --zui-dropdown-trigger-gradient-orange-fg: oklch(90.1% 0.076 70.697);
  --zui-dropdown-content-border: oklch(20.8% 0.042 265.755 / 0.1);
  --zui-dropdown-content-bg: oklch(96.8% 0.007 247.896);
  --zui-dropdown-content-fg: oklch(20.8% 0.042 265.755);
  --zui-dropdown-item-ring-focus: oklch(55.1% 0.027 264.364 / 0.6);
  --zui-dropdown-item-default-bg-hover: oklch(96.7% 0.003 264.542);
  --zui-dropdown-item-default-fg-hover: oklch(55.1% 0.027 264.364);
  --zui-dropdown-item-default-fg: oklch(21% 0.034 264.665);
  --zui-dropdown-item-outline-bg-hover: oklch(96.7% 0.003 264.542);
  --zui-dropdown-item-outline-fg-hover: oklch(55.1% 0.027 264.364);
  --zui-dropdown-item-outline-border: #000000;
  --zui-dropdown-item-outline-fg: oklch(21% 0.034 264.665);
  --zui-dropdown-item-ghost-bg-hover: oklch(96.7% 0.003 264.542);
  --zui-dropdown-item-ghost-fg-hover: oklch(55.1% 0.027 264.364);
  --zui-dropdown-item-ghost-bg: transparent;
  --zui-dropdown-item-ghost-fg: oklch(21% 0.034 264.665);
  --zui-dropdown-item-white-bg-hover: oklch(96.7% 0.003 264.542);
  --zui-dropdown-item-white-fg-hover: oklch(55.1% 0.027 264.364);
  --zui-dropdown-item-white-bg: #ffffff;
  --zui-dropdown-item-white-fg: oklch(21% 0.034 264.665);
  --zui-dropdown-item-black-bg-hover: oklch(96.7% 0.003 264.542);
  --zui-dropdown-item-black-fg-hover: oklch(55.1% 0.027 264.364);
  --zui-dropdown-item-black-bg: #000000;
  --zui-dropdown-item-black-fg: #ffffff;
  --zui-dropdown-item-sky-bg-hover: oklch(95.1% 0.026 236.824);
  --zui-dropdown-item-sky-fg-hover: oklch(44.3% 0.11 240.79);
  --zui-dropdown-item-sky-bg: oklch(90.1% 0.058 230.902);
  --zui-dropdown-item-sky-fg: oklch(39.1% 0.09 240.876);
  --zui-dropdown-item-rose-bg-hover: oklch(94.1% 0.03 12.58);
  --zui-dropdown-item-rose-fg-hover: oklch(45.5% 0.188 13.697);
  --zui-dropdown-item-rose-bg: oklch(89.2% 0.058 10.001);
  --zui-dropdown-item-rose-fg: oklch(41% 0.159 10.272);
  --zui-dropdown-item-purple-bg-hover: oklch(94.6% 0.033 307.174);
  --zui-dropdown-item-purple-fg-hover: oklch(43.8% 0.218 303.724);
  --zui-dropdown-item-purple-bg: oklch(90.2% 0.063 306.703);
  --zui-dropdown-item-purple-fg: oklch(38.1% 0.176 304.987);
  --zui-dropdown-item-pink-bg-hover: oklch(94.8% 0.028 342.258);
  --zui-dropdown-item-pink-fg-hover: oklch(45.9% 0.187 3.815);
  --zui-dropdown-item-pink-bg: oklch(89.9% 0.061 343.231);
  --zui-dropdown-item-pink-fg: oklch(40.8% 0.153 2.432);
  --zui-dropdown-item-orange-bg-hover: oklch(95.4% 0.038 75.164);
  --zui-dropdown-item-orange-fg-hover: oklch(47% 0.157 37.304);
  --zui-dropdown-item-orange-bg: oklch(90.1% 0.076 70.697);
  --zui-dropdown-item-orange-fg: oklch(40.8% 0.123 38.172);
  --zui-dropdown-item-yellow-bg-hover: oklch(97.3% 0.071 103.193);
  --zui-dropdown-item-yellow-fg-hover: oklch(47.6% 0.114 61.907);
  --zui-dropdown-item-yellow-bg: oklch(94.5% 0.129 101.54);
  --zui-dropdown-item-yellow-fg: oklch(42.1% 0.095 57.708);
  --zui-dropdown-item-teal-bg-hover: oklch(95.3% 0.051 180.801);
  --zui-dropdown-item-teal-fg-hover: oklch(43.7% 0.078 188.216);
  --zui-dropdown-item-teal-bg: oklch(91% 0.096 180.426);
  --zui-dropdown-item-teal-fg: oklch(38.6% 0.063 188.416);
  --zui-dropdown-item-indigo-bg-hover: oklch(93% 0.034 272.788);
  --zui-dropdown-item-indigo-fg-hover: oklch(39.8% 0.195 277.366);
  --zui-dropdown-item-indigo-bg: oklch(87% 0.065 274.039);
  --zui-dropdown-item-indigo-fg: oklch(35.9% 0.144 278.697);
  --zui-dropdown-item-emerald-bg-hover: oklch(95% 0.052 163.051);
  --zui-dropdown-item-emerald-fg-hover: oklch(43.2% 0.095 166.913);
  --zui-dropdown-item-emerald-bg: oklch(90.5% 0.093 164.15);
  --zui-dropdown-item-emerald-fg: oklch(37.8% 0.077 168.94);
  --zui-dropdown-item-gray-bg-hover: oklch(96.7% 0.003 264.542);
  --zui-dropdown-item-gray-fg-hover: oklch(55.1% 0.027 264.364);
  --zui-dropdown-item-gray-bg: oklch(92.8% 0.006 264.531);
  --zui-dropdown-item-gray-fg: oklch(55.1% 0.027 264.364);
  --zui-dropdown-item-amber-bg-hover: oklch(96.2% 0.059 95.617);
  --zui-dropdown-item-amber-fg-hover: oklch(47.3% 0.137 46.201);
  --zui-dropdown-item-amber-bg: oklch(92.4% 0.12 95.746);
  --zui-dropdown-item-amber-fg: oklch(41.4% 0.112 45.904);
  --zui-dropdown-item-violet-bg-hover: oklch(94.3% 0.029 294.588);
  --zui-dropdown-item-violet-fg-hover: oklch(43.2% 0.232 292.759);
  --zui-dropdown-item-violet-bg: oklch(89.4% 0.057 293.283);
  --zui-dropdown-item-violet-fg: oklch(38% 0.189 293.745);
  --zui-dropdown-item-gradient-blue-from: oklch(42.4% 0.199 265.638);
  --zui-dropdown-item-gradient-blue-to: oklch(43.8% 0.218 303.724);
  --zui-dropdown-item-gradient-blue-fg-hover: oklch(62.3% 0.214 259.815);
  --zui-dropdown-item-gradient-blue-fg: oklch(37.9% 0.146 265.522);
  --zui-dropdown-item-gradient-green-from: oklch(44.8% 0.119 151.328);
  --zui-dropdown-item-gradient-green-to: oklch(45.3% 0.124 130.933);
  --zui-dropdown-item-gradient-green-fg-hover: oklch(72.3% 0.219 149.579);
  --zui-dropdown-item-gradient-green-fg: oklch(39.3% 0.095 152.535);
  --zui-dropdown-item-gradient-red-from: oklch(44.4% 0.177 26.899);
  --zui-dropdown-item-gradient-red-to: oklch(45.9% 0.187 3.815);
  --zui-dropdown-item-gradient-red-fg-hover: oklch(63.7% 0.237 25.331);
  --zui-dropdown-item-gradient-red-fg: oklch(39.6% 0.141 25.723);
  --zui-dropdown-item-gradient-yellow-from: oklch(47.6% 0.114 61.907);
  --zui-dropdown-item-gradient-yellow-to: oklch(47% 0.157 37.304);
  --zui-dropdown-item-gradient-yellow-fg-hover: oklch(79.5% 0.184 86.047);
  --zui-dropdown-item-gradient-yellow-fg: oklch(42.1% 0.095 57.708);
  --zui-dropdown-item-gradient-purple-from: oklch(43.8% 0.218 303.724);
  --zui-dropdown-item-gradient-purple-to: oklch(45.9% 0.187 3.815);
  --zui-dropdown-item-gradient-purple-fg-hover: oklch(62.7% 0.265 303.9);
  --zui-dropdown-item-gradient-purple-fg: oklch(38.1% 0.176 304.987);
  --zui-dropdown-item-gradient-teal-from: oklch(43.7% 0.078 188.216);
  --zui-dropdown-item-gradient-teal-to: oklch(45% 0.085 224.283);
  --zui-dropdown-item-gradient-teal-fg-hover: oklch(70.4% 0.14 182.503);
  --zui-dropdown-item-gradient-teal-fg: oklch(38.6% 0.063 188.416);
  --zui-dropdown-item-gradient-indigo-from: oklch(39.8% 0.195 277.366);
  --zui-dropdown-item-gradient-indigo-to: oklch(43.8% 0.218 303.724);
  --zui-dropdown-item-gradient-indigo-fg-hover: oklch(58.5% 0.233 277.117);
  --zui-dropdown-item-gradient-indigo-fg: oklch(35.9% 0.144 278.697);
  --zui-dropdown-item-gradient-pink-from: oklch(45.9% 0.187 3.815);
  --zui-dropdown-item-gradient-pink-to: oklch(45.5% 0.188 13.697);
  --zui-dropdown-item-gradient-pink-fg-hover: oklch(65.6% 0.241 354.308);
  --zui-dropdown-item-gradient-pink-fg: oklch(40.8% 0.153 2.432);
  --zui-dropdown-item-gradient-orange-from: oklch(47% 0.157 37.304);
  --zui-dropdown-item-gradient-orange-to: oklch(44.4% 0.177 26.899);
  --zui-dropdown-item-gradient-orange-fg-hover: oklch(70.5% 0.213 47.604);
  --zui-dropdown-item-gradient-orange-fg: oklch(40.8% 0.123 38.172);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-dropdown-trigger-default-bg-dark: oklch(21% 0.034 264.665);
  --zui-dropdown-trigger-default-fg-dark: #ffffff;
  /* ...same variables with -dark at the end */
}

What it does

Typeahead and roving tabindex patterns keep long lists manageable.

Anchor positioning adapts to viewport edges automatically when configured.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Ensure each item has readable labels and disabled items are skipped appropriately.

Common use cases

Overflow menus on table rows.
Account menus in application headers.
Compact filters for chart dashboards.
Secondary actions beside primary buttons.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Dropdown component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize dropdown with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Dropdown implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.