Dropdown menu

תפריט פעולות עם פריטים עשירים, אפשרויות בחירה ותפריטי משנה שנפתח לפני הידרציה.

דפדפנים: Chrome 151+
למה הגרסה הזאת?
CSS anchor positioning places this surface beside its trigger using position-anchor, and anchor(). Older Chrome versions may place the surface away from its trigger.
Firefox 151+
למה הגרסה הזאת?
CSS anchor positioning places this surface beside its trigger using position-anchor, and anchor(). Older Firefox versions may place the surface away from its trigger.
Safari 27+
למה הגרסה הזאת?
CSS anchor positioning places this surface beside its trigger using position-anchor, and anchor(). Older Safari versions may place the surface away from its trigger.
שכבה: 2
גודל חבילה דחוסה: 6.53 kB
מגבלת פריסה כפויה: 0 ms
מגבלת Axe: 0
תואם SSR: כן
חוזה מפורסם: סביבת בדיקות

מגרש ניסויים

סקירה

Dropdown menu

תפריט פשוט

תפריט מורכב

תפריט גדול

שורת תפריטים

מגרש ניסויים

React

CSS

Tailwind

import { useState } from "react";
import { DropdownMenu } from "@gunkin/uiify";

function MenuBar() {
  const [openMenu, setOpenMenu] = useState<string>();

  return (
    <DropdownMenu.Bar className="">
      <DropdownMenu.Root open={openMenu === "file"} onOpenChange={(next) => setOpenMenu(next ? "file" : undefined)}>
        <DropdownMenu.Trigger className="" role="menuitem" openOnHover>
          File
        </DropdownMenu.Trigger>
        <DropdownMenu.Content className="">
          <DropdownMenu.Item className="">New</DropdownMenu.Item>
          <DropdownMenu.Separator className="" />
          <DropdownMenu.Item className="">Quit</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Root>

      <DropdownMenu.Root open={openMenu === "edit"} onOpenChange={(next) => setOpenMenu(next ? "edit" : undefined)}>
        <DropdownMenu.Trigger className="" role="menuitem" openOnHover>
          Edit
        </DropdownMenu.Trigger>
        <DropdownMenu.Content className="">
          <DropdownMenu.Item className="">Undo</DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Root>
    </DropdownMenu.Bar>
  );
}

export default function Example() {
  return (
    <>
      <DropdownMenu.Root>
        <DropdownMenu.Trigger className="">Actions</DropdownMenu.Trigger>
        <DropdownMenu.Content className="">
          <DropdownMenu.Label className="">Workspace</DropdownMenu.Label>
          <DropdownMenu.Item className="">
            <DropdownMenu.ItemText className="">
              Open project
              <DropdownMenu.ItemDescription className="">Open in a new window</DropdownMenu.ItemDescription>
            </DropdownMenu.ItemText>
            <DropdownMenu.Shortcut className="">⌘O</DropdownMenu.Shortcut>
          </DropdownMenu.Item>
          <DropdownMenu.CheckboxItem className="" defaultChecked>
            <DropdownMenu.ItemIndicator className="">✓</DropdownMenu.ItemIndicator>
            <DropdownMenu.ItemText className="">Show toolbar</DropdownMenu.ItemText>
          </DropdownMenu.CheckboxItem>
          <DropdownMenu.Separator className="" />
          <DropdownMenu.RadioGroup defaultValue="comfortable" aria-label="Density">
            <DropdownMenu.RadioItem className="" value="comfortable">
              Comfortable
            </DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem className="" value="compact">
              Compact
            </DropdownMenu.RadioItem>
          </DropdownMenu.RadioGroup>
          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger className="">Share</DropdownMenu.SubTrigger>
            <DropdownMenu.SubContent className="">
              <DropdownMenu.Item className="">Copy link</DropdownMenu.Item>
            </DropdownMenu.SubContent>
          </DropdownMenu.Sub>
        </DropdownMenu.Content>
      </DropdownMenu.Root>
      <MenuBar />
    </>
  );
}

/* Button — pill-shaped and monochrome: a filled foreground action by default, secondary for
   the tonal one, outline for the bordered one, ghost for a surface that only appears on
   hover, link for inline text actions.

   Filled variants are lit from above by two layers that sit between the fill and the label:
   - `::before`, the wash: a blurred copy of the shape raised by half its height, so only its
     soft lower edge glows inside the upper half. `filter` runs before `clip-path`, which lets
     one box blur itself and still be cut back to the button outline.
   - `::after`, the rim: a half-pixel ring whose colour fades out towards the bottom. A
     box-shadow cannot take a gradient and `border-image` ignores the radius, so the ring is
     a gradient box with its content box masked out. */

@layer components {
  :where([data-uiify-button]) {
    --uiify-button-rim: rgb(255 255 255 / 20%);
    --uiify-button-wash: light-dark(rgb(255 255 255 / 15%), rgb(255 255 255 / 30%));

    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-block-size: var(--control-md);

    /* Never narrower than tall: an icon size only has to drop the padding to be a circle. */
    min-inline-size: var(--control-md);
    padding-block: 0;
    padding-inline: 1.25rem;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-full);
    background-color: var(--foreground);
    background-clip: padding-box;
    color: var(--background);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: 1.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-colors);
  }

  :where([data-uiify-button])::before,
  :where([data-uiify-button])::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
  }

  :where([data-uiify-button])::before {
    background-color: var(--uiify-button-wash);
    filter: blur(10px);
    translate: 0 -50%;
    clip-path: inset(50% 0 -50% 0 round var(--radius-full));
  }

  :where([data-uiify-button])::after {
    padding: 0.5px;
    background-image: linear-gradient(to bottom, var(--uiify-button-rim), transparent 75%);
    mask:
      linear-gradient(#fff 0 0) content-box exclude,
      linear-gradient(#fff 0 0);
  }

  /* Sizes: md is the default metrics above. */
  [data-uiify-button]:is([data-size="sm"], [data-size="icon-sm"]) {
    min-block-size: var(--control-sm);
    min-inline-size: var(--control-sm);
    padding-inline: 0.75rem;
    gap: 0.25rem;
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }

  [data-uiify-button]:is([data-size="lg"], [data-size="icon-lg"]) {
    min-block-size: var(--control-lg);
    min-inline-size: var(--control-lg);
    padding-inline: 1.75rem;
    font-size: var(--text-lg);
    line-height: 1.75rem;
  }

  /* Icon sizes: the same three heights with no padding, for a single icon. */
  [data-uiify-button][data-size^="icon"] {
    padding-inline: 0;
  }

  @media (any-hover: hover) and (any-pointer: fine) {
    [data-uiify-button]:hover:not(:disabled, [data-disabled]) {
      background-color: color-mix(in oklch, var(--foreground) 90%, var(--background));
    }
  }

  [data-uiify-button]:active:not(:disabled, [data-disabled]) {
    background-color: color-mix(in oklch, var(--foreground) 80%, var(--background));
  }

  [data-uiify-button]:disabled,
  [data-uiify-button][data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Secondary: tonal low-emphasis fill. */
  [data-uiify-button][data-variant="secondary"] {
    --uiify-button-rim: light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 10%));
    --uiify-button-wash: light-dark(rgb(255 255 255 / 20%), rgb(255 255 255 / 5%));

    background-color: color-mix(in oklch, var(--foreground) 10%, transparent);
    color: var(--foreground);
  }

  /* Outline: no fill and no wash, a hairline border in the text colour. Its rim is a full
     border-width ring laid over that border, so the top edge reads slightly stronger and
     fades into the plain border below. */
  [data-uiify-button][data-variant="outline"] {
    --uiify-button-rim: color-mix(in oklch, var(--foreground) 25%, transparent);

    border-color: color-mix(in oklch, var(--foreground) 20%, transparent);
    background-color: transparent;
    color: var(--foreground);
  }

  [data-uiify-button][data-variant="outline"]::before {
    content: none;
  }

  [data-uiify-button][data-variant="outline"]::after {
    inset: calc(-1 * var(--border-width));
    padding: var(--border-width);
  }

  [data-uiify-button][data-variant="outline"]:active:not(:disabled, [data-disabled]) {
    background-color: color-mix(in oklch, var(--foreground) 16%, transparent);
  }

  /* Ghost: text only; the tonal surface appears on hover. Flat, so no light layers. */
  [data-uiify-button][data-variant="ghost"] {
    background-color: transparent;
    color: var(--foreground);
  }

  [data-uiify-button][data-variant="ghost"]::before,
  [data-uiify-button][data-variant="ghost"]::after {
    content: none;
  }

  [data-uiify-button][data-variant="ghost"]:active:not(:disabled, [data-disabled]) {
    background-color: color-mix(in oklch, var(--foreground) 16%, transparent);
  }

  [data-uiify-button][data-variant="secondary"]:active:not(:disabled, [data-disabled]) {
    background-color: color-mix(in oklch, var(--foreground) 26%, transparent);
  }

  /* Destructive: irreversible or dangerous actions. */
  [data-uiify-button][data-variant="destructive"] {
    --uiify-button-wash: rgb(255 255 255 / 15%);

    background-color: var(--destructive);
    color: var(--destructive-foreground);
  }

  [data-uiify-button][data-variant="destructive"]:active:not(:disabled, [data-disabled]) {
    background-color: color-mix(in oklch, var(--destructive), black 20%);
  }

  @media (any-hover: hover) and (any-pointer: fine) {
    [data-uiify-button][data-variant="outline"]:hover:not(:disabled, [data-disabled]),
    [data-uiify-button][data-variant="ghost"]:hover:not(:disabled, [data-disabled]) {
      background-color: color-mix(in oklch, var(--foreground) 10%, transparent);
    }

    [data-uiify-button][data-variant="secondary"]:hover:not(:disabled, [data-disabled]) {
      background-color: color-mix(in oklch, var(--foreground) 20%, transparent);
    }

    [data-uiify-button][data-variant="destructive"]:hover:not(:disabled, [data-disabled]) {
      background-color: color-mix(in oklch, var(--destructive), black 12%);
    }
  }
}

@layer components {
  /* Selected: the chosen item of a set or a toggle that is on, filled with the brand colour.
     The state is read from whatever already carries it: the `selected` prop, a pressed toggle,
     the current page, or — for a label styled as a button — the checked native control right
     before it, so a toggle works with no JavaScript. */
  [data-uiify-button]:is([data-selected], [aria-pressed="true"], [aria-current="page"]),
  :checked + [data-uiify-button] {
    --uiify-button-rim: rgb(255 255 255 / 20%);
    --uiify-button-wash: rgb(255 255 255 / 15%);

    border-color: transparent;
    background-color: var(--primary);
    color: var(--primary-foreground);
  }

  @media (any-hover: hover) and (any-pointer: fine) {
    [data-uiify-button]:is([data-selected], [aria-pressed="true"], [aria-current="page"]):hover:not(
        :disabled,
        [data-disabled]
      ),
    :checked:not(:disabled) + [data-uiify-button]:hover {
      background-color: color-mix(in oklch, var(--primary) 88%, var(--primary-foreground));
    }
  }

  /* A label styled as a button follows the native control it belongs to. */
  :disabled + [data-uiify-button] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  [data-uiify-button][hidden] {
    display: none;
  }
}

@layer components {
  /* Link: an inline text action with no surface, on a button or an anchor alike. */
  [data-uiify-button][data-variant="link"],
  [data-uiify-button][data-variant="link"]:active {
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  [data-uiify-button][data-variant="link"] {
    min-inline-size: 0;
  }

  @media (any-hover: hover) and (any-pointer: fine) {
    [data-uiify-button][data-variant="link"]:hover {
      padding-inline: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--primary);
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }

  [data-uiify-button][data-variant="link"]::before,
  [data-uiify-button][data-variant="link"]::after {
    content: none;
  }

  [data-uiify-button][data-variant="link"]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 3px;
  }
}

/* Dropdown menu — a compact command surface with explicit anatomy hooks. */

@layer components {
  [data-uiify-menu-bar] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--background);
  }

  :where(
    [data-uiify-menu] :is([data-part="content"], [data-part="sub-content"]),
    [data-uiify-menu]:is([data-part="content"], [data-part="sub-content"])
  ):where(:not([popover]), :popover-open) {
    display: flex;
  }

  :where(
    [data-uiify-menu] :is([data-part="content"], [data-part="sub-content"]),
    [data-uiify-menu]:is([data-part="content"], [data-part="sub-content"])
  ) {
    flex-direction: column;
    min-inline-size: 12rem;
    max-block-size: min(24rem, calc(100dvb - 2rem));
    overflow-block: auto;
    overscroll-behavior: contain;
    padding: var(--space-xs);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-popover);
    transform-origin: var(--transform-origin, top);
  }

  :where(
    [data-uiify-menu] :is([data-part="content"], [data-part="sub-content"]),
    [data-uiify-menu]:is([data-part="content"], [data-part="sub-content"])
  )[data-state="closed"] {
    display: none;
  }

  [data-uiify-menu]
    :is(
      [data-part="item"],
      [data-part="checkbox-item"],
      [data-part="radio-item"],
      [data-part="sub-trigger"]
    ) {
    display: flex;
    align-items: center;
    column-gap: var(--space-md);
    padding-block: var(--space-sm);
    padding-inline: var(--space-md);
    border-radius: calc(var(--radius-lg) - var(--space-xs));
    cursor: pointer;
    user-select: none;
    inline-size: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--text-sm) !important;
    line-height: var(--leading-normal);
    text-align: start;
    appearance: none;
  }

  [data-uiify-menu]
    :is(
      [data-part="item"],
      [data-part="checkbox-item"],
      [data-part="radio-item"],
      [data-part="sub-trigger"]
    ):is(:hover, :focus-visible, [data-highlighted]) {
    background-color: var(--accent);
    color: var(--accent-foreground);
    outline: none;
  }

  [data-uiify-menu]
    [data-part="radio-item"]:hover[role="menuitemradio"][data-state="checked"]
    [data-part="item-indicator"],
  [data-uiify-menu]
    [data-part="radio-item"]:focus-visible[role="menuitemradio"][data-state="checked"]
    [data-part="item-indicator"],
  [data-uiify-menu]
    [data-part="radio-item"][data-highlighted][role="menuitemradio"][data-state="checked"]
    [data-part="item-indicator"] {
    border-color: var(--accent-foreground);
  }

  [data-uiify-menu]
    :is(
      [data-part="item"],
      [data-part="checkbox-item"],
      [data-part="radio-item"],
      [data-part="sub-trigger"]
    ):is([aria-disabled="true"], [data-disabled]) {
    opacity: 0.5;
    pointer-events: none;
  }

  [data-uiify-menu]
    :is(
      [data-part="item"],
      [data-part="checkbox-item"],
      [data-part="radio-item"],
      [data-part="sub-trigger"]
    )[data-danger] {
    color: var(--destructive, var(--foreground));
  }

  [data-uiify-menu]
    :is(
      [data-part="item"],
      [data-part="checkbox-item"],
      [data-part="radio-item"],
      [data-part="sub-trigger"]
    )[data-danger]:is(:hover, :focus-visible, [data-highlighted]) {
    background-color: var(--destructive);
    color: var(--destructive-foreground);
  }

  [data-uiify-menu] [data-part="item-icon"],
  [data-uiify-menu] [data-part="item-indicator"] {
    display: inline-grid;
    place-items: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: 0 0 1.25rem;
  }

  [data-uiify-menu] [data-part="item-indicator"] {
    border: var(--border-width) solid var(--input);
    border-radius: var(--radius-xs);
    color: transparent;
  }

  [role="menuitemcheckbox"][data-state="checked"] [data-part="item-indicator"],
  [role="menuitemcheckbox"][data-state="indeterminate"] [data-part="item-indicator"] {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
  }

  [role="menuitemcheckbox"][data-state="checked"] [data-part="item-indicator"]::before {
    inline-size: 0.65rem;
    block-size: 0.65rem;
    background-color: currentcolor;
    clip-path: polygon(14% 44%, 0 65%, 38% 100%, 100% 22%, 84% 6%, 38% 68%);
    content: "";
  }

  [role="menuitemcheckbox"][data-state="indeterminate"] [data-part="item-indicator"]::before {
    inline-size: 0.65rem;
    block-size: 0.12rem;
    background: currentcolor;
    content: "";
  }

  [role="menuitemradio"] [data-part="item-indicator"] {
    border-radius: 50%;
  }

  [role="menuitemradio"][data-state="checked"] [data-part="item-indicator"] {
    border-width: 5px;
    border-color: var(--primary);
    background: var(--card);
  }

  [role="menuitemradio"][data-state="checked"] [data-part="item-indicator"]::before {
    content: none;
  }

  [data-uiify-menu] [data-part="item-icon"] > svg,
  [data-uiify-menu] [data-part="item-indicator"] > svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  [data-uiify-menu] [data-part="item-text"] {
    display: grid;
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  [data-uiify-menu] [data-part="item-description"] {
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
  }

  [data-uiify-menu]
    :is(
      [data-part="item"],
      [data-part="checkbox-item"],
      [data-part="radio-item"],
      [data-part="sub-trigger"]
    ):is(:hover, :focus-visible, [data-highlighted])
    [data-part="item-description"] {
    color: inherit;
    opacity: 0.8;
  }

  [data-uiify-menu] [data-part="shortcut"] {
    margin-inline-start: auto;
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-family: inherit;
    font-weight: inherit;
    line-height: 1;
    white-space: nowrap;
  }

  [data-uiify-menu]
    :is(
      [data-part="item"],
      [data-part="checkbox-item"],
      [data-part="radio-item"],
      [data-part="sub-trigger"]
    ):is(:hover, :focus-visible, [data-highlighted])
    [data-part="shortcut"] {
    color: inherit;
    opacity: 0.85;
  }

  [data-uiify-menu] [data-part="label"] {
    padding-block: var(--space-xs);
    padding-inline: var(--space-md);
    color: var(--muted-foreground);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
  }

  [data-uiify-menu] [data-part="separator"] {
    block-size: var(--border-width);
    margin-block: var(--space-xs);
    margin-inline: calc(-1 * var(--space-xs));
    background-color: var(--border);
  }

  [data-uiify-menu] [data-part="sub-content"] {
    min-inline-size: 11rem;
  }

  [data-uiify-menu] [data-part="sub-content"][data-side="right"] {
    --uiify-anchor-offset: 0;

    inset-block-start: calc(anchor(start) - var(--space-xs));
  }

  @media (prefers-reduced-motion: no-preference) {
    :where(
      [data-uiify-menu] :is([data-part="content"], [data-part="sub-content"]),
      [data-uiify-menu]:is([data-part="content"], [data-part="sub-content"])
    ) {
      transition: var(--transition-presence);
    }

    :where(
        [data-uiify-menu] :is([data-part="content"], [data-part="sub-content"]),
        [data-uiify-menu]:is([data-part="content"], [data-part="sub-content"])
      )[popover]:not(:popover-open) {
      opacity: 0;
      scale: var(--presence-scale);
    }

    @starting-style {
      :where(
        [data-uiify-menu] :is([data-part="content"], [data-part="sub-content"]),
        [data-uiify-menu]:is([data-part="content"], [data-part="sub-content"])
      ):popover-open {
        opacity: 0;
        scale: var(--presence-scale);
      }
    }
  }
}

@layer components {
  :is([data-uiify-dropdown-menu], [data-uiify-context-menu])
    [role="menuitemradio"]
    [data-part="item-indicator"] {
    border-radius: 50%;
  }
}

import { useState } from "react";
import { DropdownMenu } from "@gunkin/uiify";

function MenuBar() {
  const [openMenu, setOpenMenu] = useState<string>();

  return (
    <DropdownMenu.Bar
      className="
        inline-flex items-center gap-xs p-xs border-[length:var(--border-width)] border-solid border-border rounded-lg
        bg-background
      "
    >
      <DropdownMenu.Root open={openMenu === "file"} onOpenChange={(next) => setOpenMenu(next ? "file" : undefined)}>
        <DropdownMenu.Trigger
          className={
            "relative isolate inline-flex items-center justify-center gap-1.5 min-h-10 min-w-10 px-5 py-px border-[l" +
            "ength:var(--border-width)] border-solid border-transparent rounded-full bg-clip-padding text-base font-" +
            "medium leading-6 no-underline cursor-pointer [transition:var(--transition-colors)] focus-visible:[outli" +
            "ne:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transpa" +
            "rent)] disabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:curso" +
            "r-not-allowed [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-rim:rgb(2" +
            "55_255_255_/_20%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-wash" +
            ":rgb(255_255_255_/_15%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:border-transpa" +
            "rent [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:bg-primary [&:is([data-selected],[" +
            "aria-pressed=true],[aria-current=page])]:text-primary-foreground [:checked+&]:[--uiify-button-rim:rgb(2" +
            "55_255_255_/_20%)] [:checked+&]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [:checked+&]:border-transp" +
            "arent [:checked+&]:bg-primary [:checked+&]:text-primary-foreground [@media_(any-hover:_hover)_and_(any-" +
            "pointer:_fine)]:[&:is([data-selected],[aria-pressed=true],[aria-current=page]):hover:not(:disabled,[dat" +
            "a-disabled])]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] [@m" +
            "edia_(any-hover:_hover)_and_(any-pointer:_fine)]:[:checked:not(:disabled)+&:hover]:[background-color:co" +
            "lor-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] bg-foreground text-background [@media" +
            "_(any-hover:_hover)_and_(any-pointer:_fine)]:hover:[&:not(:disabled,[data-disabled])]:[background-color" +
            ":color-mix(in_oklch,_var(--foreground)_90%,_var(--background))] active:[&:not(:disabled,[data-disabled]" +
            ")]:[background-color:color-mix(in_oklch,_var(--foreground)_80%,_var(--background))]"
          }
          role="menuitem"
          openOnHover
        >
          File
        </DropdownMenu.Trigger>
        <DropdownMenu.Content
          className="
            [&[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
            [&_[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
            [&[popover]:popover-open:not([data-positioning=native])]:[margin:revert]
            [&_[popover]:popover-open:not([data-positioning=native])]:[margin:revert] flex-col [min-inline-size:12rem]
            [max-block-size:min(24rem,calc(100dvb_-_2rem))] overflow-y-auto overscroll-contain p-xs
            border-[length:var(--border-width)] border-solid border-border rounded-lg bg-popover text-popover-foreground
            shadow-popover [transform-origin:var(--transform-origin,top)] data-[state=closed]:hidden
            [&:where(:not([popover]),:popover-open)]:flex [&[data-part=sub-content]]:[min-inline-size:11rem]
            [&[data-part=sub-content][data-side=right]]:[--uiify-anchor-offset:0]
            [&[data-part=sub-content][data-side=right]]:[inset-block-start:calc(anchor(start)_-_var(--space-xs))]
            motion-safe:[transition:var(--transition-presence)] motion-safe:[&:not(:popover-open)]:opacity-0
            motion-safe:[&:not(:popover-open)]:[scale:var(--presence-scale)]
            motion-safe:starting:[&:popover-open]:opacity-0
            motion-safe:starting:[&:popover-open]:[scale:var(--presence-scale)]
          "
        >
          <DropdownMenu.Item
            className="
              flex items-center gap-md w-full py-sm px-md border-0 rounded-[calc(var(--radius-lg)_-_var(--space-xs))]
              bg-transparent text-inherit [font-family:inherit] [font-weight:inherit] text-sm
              [line-height:var(--leading-normal)] text-start cursor-pointer select-none appearance-none hover:bg-accent
              hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground
              focus-visible:outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground
              aria-[disabled=true]:opacity-50 aria-[disabled=true]:pointer-events-none data-[disabled]:opacity-50
              data-[disabled]:pointer-events-none data-[danger]:text-destructive data-[danger]:hover:bg-destructive
              data-[danger]:hover:text-destructive-foreground data-[danger]:focus-visible:bg-destructive
              data-[danger]:focus-visible:text-destructive-foreground data-[danger]:data-[highlighted]:bg-destructive
              data-[danger]:data-[highlighted]:text-destructive-foreground
            "
          >
            New
          </DropdownMenu.Item>
          <DropdownMenu.Separator
            className="
              [block-size:var(--border-width)] [margin-block:var(--space-xs)] [margin-inline:calc(-1_*var(--space-xs))]
              bg-border
            "
          />
          <DropdownMenu.Item
            className="
              flex items-center gap-md w-full py-sm px-md border-0 rounded-[calc(var(--radius-lg)_-_var(--space-xs))]
              bg-transparent text-inherit [font-family:inherit] [font-weight:inherit] text-sm
              [line-height:var(--leading-normal)] text-start cursor-pointer select-none appearance-none hover:bg-accent
              hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground
              focus-visible:outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground
              aria-[disabled=true]:opacity-50 aria-[disabled=true]:pointer-events-none data-[disabled]:opacity-50
              data-[disabled]:pointer-events-none data-[danger]:text-destructive data-[danger]:hover:bg-destructive
              data-[danger]:hover:text-destructive-foreground data-[danger]:focus-visible:bg-destructive
              data-[danger]:focus-visible:text-destructive-foreground data-[danger]:data-[highlighted]:bg-destructive
              data-[danger]:data-[highlighted]:text-destructive-foreground
            "
          >
            Quit
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Root>

      <DropdownMenu.Root open={openMenu === "edit"} onOpenChange={(next) => setOpenMenu(next ? "edit" : undefined)}>
        <DropdownMenu.Trigger
          className={
            "relative isolate inline-flex items-center justify-center gap-1.5 min-h-10 min-w-10 px-5 py-px border-[l" +
            "ength:var(--border-width)] border-solid border-transparent rounded-full bg-clip-padding text-base font-" +
            "medium leading-6 no-underline cursor-pointer [transition:var(--transition-colors)] focus-visible:[outli" +
            "ne:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transpa" +
            "rent)] disabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:curso" +
            "r-not-allowed [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-rim:rgb(2" +
            "55_255_255_/_20%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-wash" +
            ":rgb(255_255_255_/_15%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:border-transpa" +
            "rent [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:bg-primary [&:is([data-selected],[" +
            "aria-pressed=true],[aria-current=page])]:text-primary-foreground [:checked+&]:[--uiify-button-rim:rgb(2" +
            "55_255_255_/_20%)] [:checked+&]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [:checked+&]:border-transp" +
            "arent [:checked+&]:bg-primary [:checked+&]:text-primary-foreground [@media_(any-hover:_hover)_and_(any-" +
            "pointer:_fine)]:[&:is([data-selected],[aria-pressed=true],[aria-current=page]):hover:not(:disabled,[dat" +
            "a-disabled])]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] [@m" +
            "edia_(any-hover:_hover)_and_(any-pointer:_fine)]:[:checked:not(:disabled)+&:hover]:[background-color:co" +
            "lor-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] bg-foreground text-background [@media" +
            "_(any-hover:_hover)_and_(any-pointer:_fine)]:hover:[&:not(:disabled,[data-disabled])]:[background-color" +
            ":color-mix(in_oklch,_var(--foreground)_90%,_var(--background))] active:[&:not(:disabled,[data-disabled]" +
            ")]:[background-color:color-mix(in_oklch,_var(--foreground)_80%,_var(--background))]"
          }
          role="menuitem"
          openOnHover
        >
          Edit
        </DropdownMenu.Trigger>
        <DropdownMenu.Content
          className="
            [&[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
            [&_[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
            [&[popover]:popover-open:not([data-positioning=native])]:[margin:revert]
            [&_[popover]:popover-open:not([data-positioning=native])]:[margin:revert] flex-col [min-inline-size:12rem]
            [max-block-size:min(24rem,calc(100dvb_-_2rem))] overflow-y-auto overscroll-contain p-xs
            border-[length:var(--border-width)] border-solid border-border rounded-lg bg-popover text-popover-foreground
            shadow-popover [transform-origin:var(--transform-origin,top)] data-[state=closed]:hidden
            [&:where(:not([popover]),:popover-open)]:flex [&[data-part=sub-content]]:[min-inline-size:11rem]
            [&[data-part=sub-content][data-side=right]]:[--uiify-anchor-offset:0]
            [&[data-part=sub-content][data-side=right]]:[inset-block-start:calc(anchor(start)_-_var(--space-xs))]
            motion-safe:[transition:var(--transition-presence)] motion-safe:[&:not(:popover-open)]:opacity-0
            motion-safe:[&:not(:popover-open)]:[scale:var(--presence-scale)]
            motion-safe:starting:[&:popover-open]:opacity-0
            motion-safe:starting:[&:popover-open]:[scale:var(--presence-scale)]
          "
        >
          <DropdownMenu.Item
            className="
              flex items-center gap-md w-full py-sm px-md border-0 rounded-[calc(var(--radius-lg)_-_var(--space-xs))]
              bg-transparent text-inherit [font-family:inherit] [font-weight:inherit] text-sm
              [line-height:var(--leading-normal)] text-start cursor-pointer select-none appearance-none hover:bg-accent
              hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground
              focus-visible:outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground
              aria-[disabled=true]:opacity-50 aria-[disabled=true]:pointer-events-none data-[disabled]:opacity-50
              data-[disabled]:pointer-events-none data-[danger]:text-destructive data-[danger]:hover:bg-destructive
              data-[danger]:hover:text-destructive-foreground data-[danger]:focus-visible:bg-destructive
              data-[danger]:focus-visible:text-destructive-foreground data-[danger]:data-[highlighted]:bg-destructive
              data-[danger]:data-[highlighted]:text-destructive-foreground
            "
          >
            Undo
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Root>
    </DropdownMenu.Bar>
  );
}

export default function Example() {
  return (
    <>
      <DropdownMenu.Root>
        <DropdownMenu.Trigger
          className={
            "relative isolate inline-flex items-center justify-center gap-1.5 min-h-10 min-w-10 px-5 py-px border-[l" +
            "ength:var(--border-width)] border-solid border-transparent rounded-full bg-clip-padding text-base font-" +
            "medium leading-6 no-underline cursor-pointer [transition:var(--transition-colors)] focus-visible:[outli" +
            "ne:none] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transpa" +
            "rent)] disabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:curso" +
            "r-not-allowed [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-rim:rgb(2" +
            "55_255_255_/_20%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-wash" +
            ":rgb(255_255_255_/_15%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:border-transpa" +
            "rent [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:bg-primary [&:is([data-selected],[" +
            "aria-pressed=true],[aria-current=page])]:text-primary-foreground [:checked+&]:[--uiify-button-rim:rgb(2" +
            "55_255_255_/_20%)] [:checked+&]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [:checked+&]:border-transp" +
            "arent [:checked+&]:bg-primary [:checked+&]:text-primary-foreground [@media_(any-hover:_hover)_and_(any-" +
            "pointer:_fine)]:[&:is([data-selected],[aria-pressed=true],[aria-current=page]):hover:not(:disabled,[dat" +
            "a-disabled])]:[background-color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] [@m" +
            "edia_(any-hover:_hover)_and_(any-pointer:_fine)]:[:checked:not(:disabled)+&:hover]:[background-color:co" +
            "lor-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] bg-foreground text-background [@media" +
            "_(any-hover:_hover)_and_(any-pointer:_fine)]:hover:[&:not(:disabled,[data-disabled])]:[background-color" +
            ":color-mix(in_oklch,_var(--foreground)_90%,_var(--background))] active:[&:not(:disabled,[data-disabled]" +
            ")]:[background-color:color-mix(in_oklch,_var(--foreground)_80%,_var(--background))]"
          }
        >
          Actions
        </DropdownMenu.Trigger>
        <DropdownMenu.Content
          className="
            [&[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
            [&_[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
            [&[popover]:popover-open:not([data-positioning=native])]:[margin:revert]
            [&_[popover]:popover-open:not([data-positioning=native])]:[margin:revert] flex-col [min-inline-size:12rem]
            [max-block-size:min(24rem,calc(100dvb_-_2rem))] overflow-y-auto overscroll-contain p-xs
            border-[length:var(--border-width)] border-solid border-border rounded-lg bg-popover text-popover-foreground
            shadow-popover [transform-origin:var(--transform-origin,top)] data-[state=closed]:hidden
            [&:where(:not([popover]),:popover-open)]:flex [&[data-part=sub-content]]:[min-inline-size:11rem]
            [&[data-part=sub-content][data-side=right]]:[--uiify-anchor-offset:0]
            [&[data-part=sub-content][data-side=right]]:[inset-block-start:calc(anchor(start)_-_var(--space-xs))]
            motion-safe:[transition:var(--transition-presence)] motion-safe:[&:not(:popover-open)]:opacity-0
            motion-safe:[&:not(:popover-open)]:[scale:var(--presence-scale)]
            motion-safe:starting:[&:popover-open]:opacity-0
            motion-safe:starting:[&:popover-open]:[scale:var(--presence-scale)]
          "
        >
          <DropdownMenu.Label className="py-xs px-md text-muted-foreground text-xs font-[number:var(--weight-semibold)]">
            Workspace
          </DropdownMenu.Label>
          <DropdownMenu.Item
            className="
              flex items-center gap-md w-full py-sm px-md border-0 rounded-[calc(var(--radius-lg)_-_var(--space-xs))]
              bg-transparent text-inherit [font-family:inherit] [font-weight:inherit] text-sm
              [line-height:var(--leading-normal)] text-start cursor-pointer select-none appearance-none hover:bg-accent
              hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground
              focus-visible:outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground
              aria-[disabled=true]:opacity-50 aria-[disabled=true]:pointer-events-none data-[disabled]:opacity-50
              data-[disabled]:pointer-events-none data-[danger]:text-destructive data-[danger]:hover:bg-destructive
              data-[danger]:hover:text-destructive-foreground data-[danger]:focus-visible:bg-destructive
              data-[danger]:focus-visible:text-destructive-foreground data-[danger]:data-[highlighted]:bg-destructive
              data-[danger]:data-[highlighted]:text-destructive-foreground
            "
          >
            <DropdownMenu.ItemText className="grid flex-auto [min-inline-size:0]">
              Open project
              <DropdownMenu.ItemDescription className="text-muted-foreground text-xs [line-height:var(--leading-normal)]">
                Open in a new window
              </DropdownMenu.ItemDescription>
            </DropdownMenu.ItemText>
            <DropdownMenu.Shortcut className="ms-auto text-muted-foreground text-xs leading-none whitespace-nowrap">
              ⌘O
            </DropdownMenu.Shortcut>
          </DropdownMenu.Item>
          <DropdownMenu.CheckboxItem
            className="
              flex items-center gap-md w-full py-sm px-md border-0 rounded-[calc(var(--radius-lg)_-_var(--space-xs))]
              bg-transparent text-inherit [font-family:inherit] [font-weight:inherit] text-sm
              [line-height:var(--leading-normal)] text-start cursor-pointer select-none appearance-none hover:bg-accent
              hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground
              focus-visible:outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground
              aria-[disabled=true]:opacity-50 aria-[disabled=true]:pointer-events-none data-[disabled]:opacity-50
              data-[disabled]:pointer-events-none data-[danger]:text-destructive data-[danger]:hover:bg-destructive
              data-[danger]:hover:text-destructive-foreground data-[danger]:focus-visible:bg-destructive
              data-[danger]:focus-visible:text-destructive-foreground data-[danger]:data-[highlighted]:bg-destructive
              data-[danger]:data-[highlighted]:text-destructive-foreground
            "
            defaultChecked
          >
            <DropdownMenu.ItemIndicator
              className={
                "relative inline-grid place-items-center size-5 flex-[0_0_1.25rem] [&>svg]:block [&>svg]:size-full [" +
                "[role=menuitemcheckbox]_&]:border-[length:var(--border-width)] [[role=menuitemcheckbox]_&]:border-i" +
                "nput [[role=menuitemcheckbox]_&]:rounded-xs [[role=menuitemcheckbox][data-state=checked]_&]:border-" +
                "primary [[role=menuitemcheckbox][data-state=checked]_&]:bg-primary [[role=menuitemcheckbox][data-st" +
                "ate=checked]_&]:text-primary-foreground [[role=menuitemcheckbox][data-state=checked]_&]:before:cont" +
                "ent-[''] [[role=menuitemcheckbox][data-state=checked]_&]:before:size-[0.65rem] [[role=menuitemcheck" +
                "box][data-state=checked]_&]:before:bg-current [[role=menuitemcheckbox][data-state=checked]_&]:befor" +
                "e:[clip-path:polygon(14%_44%,0_65%,38%_100%,100%_22%,84%_6%,38%_68%)] [[role=menuitemcheckbox][data" +
                "-state=indeterminate]_&]:border-primary [[role=menuitemcheckbox][data-state=indeterminate]_&]:bg-pr" +
                "imary [[role=menuitemcheckbox][data-state=indeterminate]_&]:text-primary-foreground [[role=menuitem" +
                "checkbox][data-state=indeterminate]_&]:before:content-[''] [[role=menuitemcheckbox][data-state=inde" +
                "terminate]_&]:before:w-[0.65rem] [[role=menuitemcheckbox][data-state=indeterminate]_&]:before:h-[0." +
                "12rem] [[role=menuitemcheckbox][data-state=indeterminate]_&]:before:bg-current [[role=menuitemradio" +
                "]_&]:rounded-full [[role=menuitemradio][data-state=checked]_&]:border-[5px] [[role=menuitemradio][d" +
                "ata-state=checked]_&]:border-primary [[role=menuitemradio][data-state=checked]_&]:bg-card [[role=me" +
                "nuitemradio][data-state=checked]_&]:text-inherit [[role=menuitemradio][data-state=checked]_&]:befor" +
                "e:content-none"
              }
            >
              ✓
            </DropdownMenu.ItemIndicator>
            <DropdownMenu.ItemText className="grid flex-auto [min-inline-size:0]">Show toolbar</DropdownMenu.ItemText>
          </DropdownMenu.CheckboxItem>
          <DropdownMenu.Separator
            className="
              [block-size:var(--border-width)] [margin-block:var(--space-xs)] [margin-inline:calc(-1_*var(--space-xs))]
              bg-border
            "
          />
          <DropdownMenu.RadioGroup defaultValue="comfortable" aria-label="Density">
            <DropdownMenu.RadioItem
              className="
                flex items-center gap-md w-full py-sm px-md border-0 rounded-[calc(var(--radius-lg)_-_var(--space-xs))]
                bg-transparent text-inherit [font-family:inherit] [font-weight:inherit] text-sm
                [line-height:var(--leading-normal)] text-start cursor-pointer select-none appearance-none
                hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent
                focus-visible:text-accent-foreground focus-visible:outline-none data-[highlighted]:bg-accent
                data-[highlighted]:text-accent-foreground aria-[disabled=true]:opacity-50
                aria-[disabled=true]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none
                data-[danger]:text-destructive data-[danger]:hover:bg-destructive
                data-[danger]:hover:text-destructive-foreground data-[danger]:focus-visible:bg-destructive
                data-[danger]:focus-visible:text-destructive-foreground data-[danger]:data-[highlighted]:bg-destructive
                data-[danger]:data-[highlighted]:text-destructive-foreground
              "
              value="comfortable"
            >
              Comfortable
            </DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem
              className="
                flex items-center gap-md w-full py-sm px-md border-0 rounded-[calc(var(--radius-lg)_-_var(--space-xs))]
                bg-transparent text-inherit [font-family:inherit] [font-weight:inherit] text-sm
                [line-height:var(--leading-normal)] text-start cursor-pointer select-none appearance-none
                hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent
                focus-visible:text-accent-foreground focus-visible:outline-none data-[highlighted]:bg-accent
                data-[highlighted]:text-accent-foreground aria-[disabled=true]:opacity-50
                aria-[disabled=true]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none
                data-[danger]:text-destructive data-[danger]:hover:bg-destructive
                data-[danger]:hover:text-destructive-foreground data-[danger]:focus-visible:bg-destructive
                data-[danger]:focus-visible:text-destructive-foreground data-[danger]:data-[highlighted]:bg-destructive
                data-[danger]:data-[highlighted]:text-destructive-foreground
              "
              value="compact"
            >
              Compact
            </DropdownMenu.RadioItem>
          </DropdownMenu.RadioGroup>
          <DropdownMenu.Sub>
            <DropdownMenu.SubTrigger
              className="
                flex items-center gap-md w-full py-sm px-md border-0 rounded-[calc(var(--radius-lg)_-_var(--space-xs))]
                bg-transparent text-inherit [font-family:inherit] [font-weight:inherit] text-sm
                [line-height:var(--leading-normal)] text-start cursor-pointer select-none appearance-none
                hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent
                focus-visible:text-accent-foreground focus-visible:outline-none data-[highlighted]:bg-accent
                data-[highlighted]:text-accent-foreground aria-[disabled=true]:opacity-50
                aria-[disabled=true]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none
                data-[danger]:text-destructive data-[danger]:hover:bg-destructive
                data-[danger]:hover:text-destructive-foreground data-[danger]:focus-visible:bg-destructive
                data-[danger]:focus-visible:text-destructive-foreground data-[danger]:data-[highlighted]:bg-destructive
                data-[danger]:data-[highlighted]:text-destructive-foreground
              "
            >
              Share
            </DropdownMenu.SubTrigger>
            <DropdownMenu.SubContent
              className="
                [&[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
                [&_[data-positioning=native]]:[--uiify-anchor-offset:var(--space-sm)]
                [&[popover]:popover-open:not([data-positioning=native])]:[margin:revert]
                [&_[popover]:popover-open:not([data-positioning=native])]:[margin:revert] flex-col
                [min-inline-size:12rem] [max-block-size:min(24rem,calc(100dvb_-_2rem))] overflow-y-auto
                overscroll-contain p-xs border-[length:var(--border-width)] border-solid border-border rounded-lg
                bg-popover text-popover-foreground shadow-popover [transform-origin:var(--transform-origin,top)]
                data-[state=closed]:hidden [&:where(:not([popover]),:popover-open)]:flex
                [&[data-part=sub-content]]:[min-inline-size:11rem]
                [&[data-part=sub-content][data-side=right]]:[--uiify-anchor-offset:0]
                [&[data-part=sub-content][data-side=right]]:[inset-block-start:calc(anchor(start)_-_var(--space-xs))]
                motion-safe:[transition:var(--transition-presence)] motion-safe:[&:not(:popover-open)]:opacity-0
                motion-safe:[&:not(:popover-open)]:[scale:var(--presence-scale)]
                motion-safe:starting:[&:popover-open]:opacity-0
                motion-safe:starting:[&:popover-open]:[scale:var(--presence-scale)]
              "
            >
              <DropdownMenu.Item
                className="
                  flex items-center gap-md w-full py-sm px-md border-0
                  rounded-[calc(var(--radius-lg)_-_var(--space-xs))] bg-transparent text-inherit [font-family:inherit]
                  [font-weight:inherit] text-sm [line-height:var(--leading-normal)] text-start cursor-pointer
                  select-none appearance-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent
                  focus-visible:text-accent-foreground focus-visible:outline-none data-[highlighted]:bg-accent
                  data-[highlighted]:text-accent-foreground aria-[disabled=true]:opacity-50
                  aria-[disabled=true]:pointer-events-none data-[disabled]:opacity-50
                  data-[disabled]:pointer-events-none data-[danger]:text-destructive data-[danger]:hover:bg-destructive
                  data-[danger]:hover:text-destructive-foreground data-[danger]:focus-visible:bg-destructive
                  data-[danger]:focus-visible:text-destructive-foreground
                  data-[danger]:data-[highlighted]:bg-destructive
                  data-[danger]:data-[highlighted]:text-destructive-foreground
                "
              >
                Copy link
              </DropdownMenu.Item>
            </DropdownMenu.SubContent>
          </DropdownMenu.Sub>
        </DropdownMenu.Content>
      </DropdownMenu.Root>
      <MenuBar />
    </>
  );
}

API

`DropdownMenu.Bar`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	התפריטים המרכיבים את שורת התפריטים.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`Native div props, styles, events, and ref`	`ComponentPropsWithRef<"div">`	—	המאפיינים, הסגנונות, האירועים וה-ref של האלמנט המובנה מועברים הלאה.
`dir`	`"ltr" \| "rtl"`	—	כיוון הטקסט הקובע איזה מקש חץ מתקדם קדימה; כשהוא מושמט, הוא יורש את הערך מספק הכיוון הקרוב ביותר.
`loop`	`boolean`	`true`	מעביר את התנועה במקשי החצים במחזוריות מהתפריט האחרון בחזרה לראשון.

`DropdownMenu.Root`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	כפתור הפתיחה ותוכן התפריט.
`Native div props, styles, events, and ref`	`ComponentPropsWithRef<"div">`	—	המאפיינים, הסגנונות, האירועים וה-ref של האלמנט המובנה מועברים הלאה.
`defaultOpen`	`boolean`	—	מצב הפתיחה ההתחלתי של התפריט כשאינו מבוקר.
`dir`	`"ltr" \| "rtl"`	—	כיוון הטקסט הקובע איזה מקש חץ פותח תפריט משנה; כשהוא מושמט, הוא יורש את הערך מספק הכיוון הקרוב ביותר.
`disabled`	`boolean`	`false`	מונע את פתיחת התפריט.
`id`	`string`	—	המזהה המשמש לחלונית הקופצת ולמאפיין invoker של כפתור הפתיחה, כך שהם מקושרים כבר ב-HTML שנוצר בשרת.
`loop`	`boolean`	`true`	מעביר את התנועה במקשי החצים במחזוריות מהפריט האחרון בחזרה לראשון.
`onOpenChange`	`(open: boolean, details: DropdownMenuOpenChangeDetails) => void`	—	נקראת כשהתפריט נפתח או נסגר, עם הסיבה והאירוע שגרם לכך.
`open`	`boolean`	—	מצב הפתיחה של התפריט, ההופך אותו למבוקר.

`DropdownMenu.Trigger`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	תווית כפתור הפתיחה.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`openOnHover`	`boolean`	`false`	פותח את התפריט כשהמצביע נח על כפתור הפתיחה.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

`DropdownMenu.Content`

מאפיין	טיפוס	ברירת מחדל	תיאור
`align`	`"start" \| "center" \| "end"`	`"start"`	יישור התפריט לאורך הצד שנבחר של כפתור הפתיחה.
`children`	`ReactNode`	—	הפריטים, הקבוצות והמפרידים של התפריט.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	הצד של כפתור הפתיחה שבו ממוקם התפריט.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

`DropdownMenu.Group`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	הפריטים השייכים לקבוצה.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.

`DropdownMenu.Label`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	טקסט כותרת הקבוצה.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.

`DropdownMenu.Item`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	תוכן הפריט.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`closeOnSelect`	`boolean`	`true`	סוגר את התפריט לאחר בחירת הפריט.
`disabled`	`boolean`	`false`	משבית את הפריט ומדלג עליו בניווט במקלדת.
`onSelect`	`(event: MenuSelectEvent) => void`	—	נקראת כשהפריט נבחר; קריאה ל-preventDefault על האירוע משאירה את התפריט פתוח.
`textValue`	`string`	—	הטקסט המשמש להתאמה בעת חיפוש בהקלדה כשתוכן הפריט אינו טקסט פשוט.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

`DropdownMenu.ItemIcon`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	תוכן החלק.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

`DropdownMenu.ItemText`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	תוכן החלק.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

`DropdownMenu.ItemDescription`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	תוכן החלק.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

`DropdownMenu.Shortcut`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	תוכן החלק.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

`DropdownMenu.ItemIndicator`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	תוכן החלק.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

`DropdownMenu.Separator`

מאפיין	טיפוס	ברירת מחדל	תיאור
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.

`DropdownMenu.CheckboxItem`

מאפיין	טיפוס	ברירת מחדל	תיאור
`checked`	`boolean \| "indeterminate"`	—	מצב הסימון של הפריט, ההופך אותו למבוקר.
`defaultChecked`	`boolean \| "indeterminate"`	`false`	מצב הסימון ההתחלתי של הפריט כשאינו מבוקר.
`onCheckedChange`	`(checked: boolean) => void`	—	נקראת עם מצב הסימון החדש כשהפריט נבחר.
`children`	`ReactNode`	—	תוכן הפריט.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`closeOnSelect`	`boolean`	`false`	סוגר את התפריט לאחר בחירת הפריט.
`disabled`	`boolean`	`false`	משבית את הפריט ומדלג עליו בניווט במקלדת.
`onSelect`	`(event: MenuSelectEvent) => void`	—	נקראת כשהפריט נבחר; קריאה ל-preventDefault על האירוע משאירה את התפריט פתוח.
`textValue`	`string`	—	הטקסט המשמש להתאמה בעת חיפוש בהקלדה כשתוכן הפריט אינו טקסט פשוט.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

`DropdownMenu.RadioGroup`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	פריטי הרדיו השייכים לקבוצה.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`defaultValue`	`string`	—	הערך הנבחר בתחילה כשהקבוצה אינה מבוקרת.
`onValueChange`	`(value: string) => void`	—	נקראת עם הערך של פריט הרדיו שנבחר כעת.
`value`	`string`	—	הערך הנבחר, ההופך את הקבוצה למבוקרת.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

`DropdownMenu.RadioItem`

מאפיין	טיפוס	ברירת מחדל	תיאור
`value`*	`string`	—	הערך שפריט זה בוחר בקבוצת הרדיו שלו.
`children`	`ReactNode`	—	תוכן הפריט.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`closeOnSelect`	`boolean`	`false`	סוגר את התפריט לאחר בחירת הפריט.
`disabled`	`boolean`	`false`	משבית את הפריט ומדלג עליו בניווט במקלדת.
`onSelect`	`(event: MenuSelectEvent) => void`	—	נקראת כשהפריט נבחר; קריאה ל-preventDefault על האירוע משאירה את התפריט פתוח.
`textValue`	`string`	—	הטקסט המשמש להתאמה בעת חיפוש בהקלדה כשתוכן הפריט אינו טקסט פשוט.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

`DropdownMenu.Sub`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	כפתור הפתיחה של תפריט המשנה ותוכנו.
`defaultOpen`	`boolean`	—	מצב הפתיחה ההתחלתי של תפריט המשנה כשאינו מבוקר.
`onOpenChange`	`(open: boolean, details: DropdownMenuOpenChangeDetails) => void`	—	נקראת כשתפריט המשנה נפתח או נסגר, עם הסיבה והאירוע שגרם לכך.
`open`	`boolean`	—	מצב הפתיחה של תפריט המשנה, ההופך אותו למבוקר.

`DropdownMenu.SubTrigger`

מאפיין	טיפוס	ברירת מחדל	תיאור
`children`	`ReactNode`	—	תווית כפתור הפתיחה של תפריט המשנה.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`Native div props, styles, events, and ref`	`ComponentPropsWithRef<"div">`	—	המאפיינים, הסגנונות, האירועים וה-ref של האלמנט המובנה מועברים הלאה.
`disabled`	`boolean`	`false`	משבית את כפתור הפתיחה ומדלג עליו בניווט במקלדת.
`textValue`	`string`	—	הטקסט המשמש להתאמה בעת חיפוש בהקלדה כשתוכן הפריט אינו טקסט פשוט.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

`DropdownMenu.SubContent`

מאפיין	טיפוס	ברירת מחדל	תיאור
`align`	`"start" \| "center" \| "end"`	`"start"`	יישור תפריט המשנה לאורך הצד שנבחר של כפתור הפתיחה שלו.
`children`	`ReactNode`	—	הפריטים, הקבוצות והמפרידים של תפריט המשנה.
`className`	`string`	—	המחלקה המוחלת על האלמנט המוצג.
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	הצד של כפתור הפתיחה שבו ממוקם תפריט המשנה.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	החלפת האלמנט המוצג תוך שימור ההתנהגות וקישורי הנגישות.

מקלדת

מקש	פעולה
`Enter` / `Space` / `↓`	פתיחת התפריט ומיקוד הפריט הראשון
`↑` / `↓`	מעבר בין פריטים, עם חזרה להתחלה או לסוף בקצוות
`Escape`	סגירה והחזרת המיקוד למפעיל
`Home` / `End`	קפיצה לפריט הראשון או האחרון
`a–z`	מעבר לפריט המתאים באמצעות הקלדה
`→` / `←`	פתיחה או סגירה של תפריט משנה (הכיוון מתהפך ב-RTL)

נגישות

חלונית קופצת מובנית נפתחת בלחיצה לפני הידרציה; ניווט מקלדת משופר, מעבר בהקלדה, פריטי תיבת סימון ורדיו ותפריטי משנה בלחיצה, בריחוף או במקשי חצים מופעלים לאחר הידרציה. פריטים רגילים סוגרים כברירת מחדל; פריטי בחירה משאירים את התפריט פתוח. המיקום משתמש בעוגני CSS מובנים ללא טיפול בהתנגשויות.

נקודות חיבור לעיצוב

data-partdata-statedata-disableddata-highlighteddata-sidedata-aligndata-checkeddata-indeterminate

עיצוב

מראה

שפה

Dropdown menu

מגרש ניסויים

Dropdown menu

תפריט פשוט

תפריט מורכב

תפריט גדול

שורת תפריטים

API

`DropdownMenu.Bar`

`DropdownMenu.Root`

`DropdownMenu.Trigger`

`DropdownMenu.Content`

`DropdownMenu.Group`

`DropdownMenu.Label`

`DropdownMenu.Item`

`DropdownMenu.ItemIcon`

`DropdownMenu.ItemText`

`DropdownMenu.ItemDescription`

`DropdownMenu.Shortcut`

`DropdownMenu.ItemIndicator`

`DropdownMenu.Separator`

`DropdownMenu.CheckboxItem`

`DropdownMenu.RadioGroup`

`DropdownMenu.RadioItem`

`DropdownMenu.Sub`

`DropdownMenu.SubTrigger`

`DropdownMenu.SubContent`

מקלדת

נגישות

נקודות חיבור לעיצוב