72Başlayın
HextaUI

Dropdown menu

Bir düğmenin ardındaki eylem ve seçenek menüsü; gruplar, alt menüler, onay kutusu ve radyo öğeleri ile kısayollar içerir.

import {
  IconBrandGithub,
  IconCreditCard,
  IconExternalLink,
  IconKeyboard,
  IconLogout,
  IconMail,
  IconMessage,
  IconPlus,
  IconSettings,
  IconUser,
  IconUserPlus,
} from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuGroup>
          <DropdownMenuLabel>My account</DropdownMenuLabel>
          <DropdownMenuItem>
            <IconUser />
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <IconCreditCard />
            Billing
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <IconSettings />
            Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <IconKeyboard />
            Keyboard shortcuts
            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <IconUserPlus />
              Invite users
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuItem>
                <IconMail />
                Email
              </DropdownMenuItem>
              <DropdownMenuItem>
                <IconMessage />
                Message
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <IconPlus />
                More…
              </DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuItem
            render={<a href="https://github.com" target="_blank" />}
          >
            <IconBrandGithub />
            GitHub
            <IconExternalLink className="ms-auto" />
          </DropdownMenuItem>
          <DropdownMenuItem disabled>API</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <IconLogout />
          Log out
          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/dropdown-menu.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>
    Open
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Kompozisyon

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   └── DropdownMenuItem
    │       └── DropdownMenuShortcut
    ├── DropdownMenuCheckboxItem
    ├── DropdownMenuRadioGroup
    │   └── DropdownMenuRadioItem
    ├── DropdownMenuSeparator
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent

Örnekler

Güvenli alan

Bir alt menü trigger'ından alt menüsüne doğru çapraz hareket etmek kardeş trigger'ları keser. Güvenli alan, işaretçi alt menüye doğru giderken alt menüyü açık tutar. Canlı görmek için showSafeArea'yı açın: nokta alanın içinde yeşile, alt menünün değişeceği yerde kırmızıya döner.

"use client"

import * as React from "react"
import { IconDots } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

const folders = [
  "Inbox",
  "Design",
  "Engineering",
  "Marketing",
  "Finance",
  "Legal",
  "Archive",
  "Shared with me",
]

const submenus = [
  { label: "Move to", items: folders },
  { label: "Copy to", items: folders },
  { label: "Share", items: ["Copy link", "Email", "Slack"] },
  { label: "Export as", items: ["PDF", "PNG", "SVG"] },
]

export function DropdownMenuSafeArea() {
  const [showSafeArea, setShowSafeArea] = React.useState(true)

  return (
    <div className="flex flex-col items-center gap-6">
      <label className="flex items-center gap-3 text-sm">
        <Checkbox
          checked={showSafeArea}
          onCheckedChange={(checked) => setShowSafeArea(checked === true)}
        />
        Show safe area
      </label>
      <DropdownMenu showSafeArea={showSafeArea}>
        <DropdownMenuTrigger render={<Button variant="outline" />}>
          <IconDots data-icon="inline-start" />
          Q3 report.pdf
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-44">
          {submenus.map((submenu) => (
            <DropdownMenuSub key={submenu.label}>
              <DropdownMenuSubTrigger>{submenu.label}</DropdownMenuSubTrigger>
              <DropdownMenuSubContent className="w-44">
                {submenu.items.map((item) => (
                  <DropdownMenuItem key={item}>{item}</DropdownMenuItem>
                ))}
              </DropdownMenuSubContent>
            </DropdownMenuSub>
          ))}
          <DropdownMenuSeparator />
          <DropdownMenuItem>Rename</DropdownMenuItem>
          <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

Onay kutuları

<DropdownMenuCheckboxItem /> bir ayarı değiştirir ve menüyü açık tutar; böylece birkaçı art arda değiştirilebilir. Onay işareti belirmek yerine çizilerek girer ve çıkar.

"use client"

import * as React from "react"
import { IconChevronDown } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuCheckboxes() {
  const [statusBar, setStatusBar] = React.useState(true)
  const [activityBar, setActivityBar] = React.useState(false)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        View
        <IconChevronDown data-icon="inline-end" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
          <DropdownMenuCheckboxItem
            checked={statusBar}
            onCheckedChange={setStatusBar}
          >
            Status bar
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={activityBar}
            onCheckedChange={setActivityBar}
          >
            Activity bar
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem disabled>Panel</DropdownMenuCheckboxItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Radio group

Bir seçenek seçmek için <DropdownMenuRadioItem /> bileşenini bir <DropdownMenuRadioGroup /> içine sarın. Gruptaki bir etiket onu ekran okuyucular için adlandırır.

"use client"

import * as React from "react"
import { IconChevronDown } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuRadioGroupDemo() {
  const [position, setPosition] = React.useState("bottom")

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Panel position
        <IconChevronDown data-icon="inline-end" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
          <DropdownMenuLabel>Panel position</DropdownMenuLabel>
          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Sağda onay

Onay işaretini girintilemek yerine etiketten sonra göstermek için checkbox ve radio öğelerinde indicator="end" ayarlayın; bu, her seçeneğin altında açıklaması olan seçicilere uygundur.

"use client"

import * as React from "react"
import { IconChevronDown } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

const plans = [
  { value: "starter", label: "Starter", description: "For side projects" },
  { value: "team", label: "Team", description: "Shared workspace and roles" },
  { value: "scale", label: "Scale", description: "SSO, audit log and SLA" },
]

export function DropdownMenuIndicatorEnd() {
  const [plan, setPlan] = React.useState("team")
  const current = plans.find((item) => item.value === plan)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        {current?.label}
        <IconChevronDown data-icon="inline-end" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuRadioGroup value={plan} onValueChange={setPlan}>
          <DropdownMenuLabel>Plan</DropdownMenuLabel>
          {plans.map((item) => (
            <DropdownMenuRadioItem
              key={item.value}
              value={item.value}
              indicator="end"
              closeOnClick
            >
              <span className="flex min-w-0 flex-col">
                <span>{item.label}</span>
                <span className="text-xs text-muted-foreground">
                  {item.description}
                </span>
              </span>
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Select benzeri

Menü asla trigger'ından dar olmaz. Birini seçmenin menüyü de kapatması gerekiyorsa radio öğelerinde closeOnClick ayarlayın.

"use client"

import * as React from "react"
import { IconChevronDown, IconPlus } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

const workspaces = [
  "Acme Inc.",
  "Monsters Inc.",
  "A workspace with a very long name that wraps",
]

export function DropdownMenuSelect() {
  const [workspace, setWorkspace] = React.useState(workspaces[0])

  return (
    <div className="w-64 max-w-full">
      <DropdownMenu>
        <DropdownMenuTrigger
          render={
            <Button variant="outline" className="w-full justify-between" />
          }
        >
          <span className="truncate">{workspace}</span>
          <IconChevronDown data-icon="inline-end" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuRadioGroup
            value={workspace}
            onValueChange={setWorkspace}
          >
            {workspaces.map((name) => (
              <DropdownMenuRadioItem key={name} value={name} closeOnClick>
                {name}
              </DropdownMenuRadioItem>
            ))}
          </DropdownMenuRadioGroup>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            <IconPlus />
            New workspace
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

Satır eylemleri

Tek bir menü her satıra hizmet eder. createDropdownMenuHandle ile bir handle oluşturun, her trigger'a bir payload ile geçirin ve payload'u menüde okuyun. Delete bir alert dialog'a devreder.

"use client"

import * as React from "react"
import { IconDots, IconPencil, IconTrash } from "@tabler/icons-react"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import {
  createDropdownMenuHandle,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

const files = ["Quarterly report.pdf", "Brand assets", "Roadmap 2027.md"]

const rowMenu = createDropdownMenuHandle<{ name: string }>()

export function DropdownMenuRowActions() {
  const [pending, setPending] = React.useState<string | null>(null)
  const [removed, setRemoved] = React.useState<string[]>([])

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <ul className="flex flex-col gap-0.5 rounded-xl border p-1">
        {files
          .filter((name) => !removed.includes(name))
          .map((name) => (
            <li
              key={name}
              className="flex items-center gap-3 rounded-lg py-1 ps-3 pe-1 text-sm"
            >
              <span className="min-w-0 flex-1 truncate">{name}</span>
              <DropdownMenuTrigger
                handle={rowMenu}
                payload={{ name }}
                aria-label={`Actions for ${name}`}
                render={<Button variant="ghost" size="icon-sm" />}
              >
                <IconDots />
              </DropdownMenuTrigger>
            </li>
          ))}
      </ul>
      <div>
        <Button variant="outline" size="sm" onClick={() => setRemoved([])}>
          Restore files
        </Button>
      </div>
      <DropdownMenu handle={rowMenu}>
        {({ payload }) => (
          <DropdownMenuContent align="end">
            <DropdownMenuItem>
              <IconPencil />
              Rename
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              variant="destructive"
              onClick={() => setPending(payload?.name ?? null)}
            >
              <IconTrash />
              Delete…
            </DropdownMenuItem>
          </DropdownMenuContent>
        )}
      </DropdownMenu>
      <AlertDialog
        open={pending !== null}
        onOpenChange={(open) => {
          if (!open) {
            setPending(null)
          }
        }}
      >
        <AlertDialogContent size="sm">
          <AlertDialogHeader>
            <AlertDialogTitle>Delete “{pending}”?</AlertDialogTitle>
            <AlertDialogDescription>
              It moves to the trash for 30 days.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              variant="destructive"
              onClick={() => {
                if (pending) {
                  setRemoved((value) => [...value, pending])
                }
                setPending(null)
              }}
            >
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}

Kontrollü

open ve onOpenChange geçin. İkinci argüman, menünün neden değiştiğini söyler; örneğin bir trigger basışı, bir öğe basışı veya Escape. closeOnClick={false} olan öğeler menüyü açık tutar.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuControlled() {
  const [open, setOpen] = React.useState(false)
  const [reason, setReason] = React.useState("none")

  return (
    <div className="flex flex-col items-center gap-3">
      <DropdownMenu
        open={open}
        onOpenChange={(next, details) => {
          setOpen(next)
          setReason(details.reason)
        }}
      >
        <DropdownMenuTrigger render={<Button variant="outline" />}>
          Controlled
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Closes the menu</DropdownMenuItem>
          <DropdownMenuItem closeOnClick={false}>Stays open</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <p className="text-sm text-muted-foreground">
        Open: {String(open)} · last reason: {reason}
      </p>
    </div>
  )
}

Üzerine gelince aç

Trigger üzerindeki openOnHover menüyü delay sonra açar ve closeDelay sonra kapatır. Tıklama ve klavye yine çalışır; böylece dokunmatik ve klavye kullanıcıları dışarıda kalmaz.

import { IconChevronDown } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuHover() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        openOnHover
        delay={120}
        closeDelay={120}
        render={<Button variant="ghost" />}
      >
        Products
        <IconChevronDown data-icon="inline-end" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Analytics</DropdownMenuItem>
        <DropdownMenuItem>Engagement</DropdownMenuItem>
        <DropdownMenuItem>Security</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Devre dışı

Devre dışı bir trigger asla açılmaz. Devre dışı öğeler görünür kalır ve ok tuşlarıyla atlanır.

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuDisabled() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <DropdownMenu>
        <DropdownMenuTrigger disabled render={<Button variant="outline" />}>
          Disabled trigger
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Never shown</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <DropdownMenu>
        <DropdownMenuTrigger render={<Button variant="outline" />}>
          Disabled items
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Rename</DropdownMenuItem>
          <DropdownMenuItem disabled>Move (no permission)</DropdownMenuItem>
          <DropdownMenuItem disabled>Share (no permission)</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

Uzun içerik

Etiketler menüyü 20rem'in ötesine uzatmak yerine sarar, kırılmayan dizeler herhangi bir yerde bölünür ve kısayollar ilk satırda kalır.

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuLongContent() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Long labels
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>
          A label that goes on for much longer than any menu label should
        </DropdownMenuLabel>
        <DropdownMenuItem>
          Move to “Supercalifragilisticexpialidocious archive 2026”
          <DropdownMenuShortcut>⌥⌘M</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          https://example.com/a/really/long/url/without/any/spaces/at/all
        </DropdownMenuItem>
        <DropdownMenuItem>👩‍👩‍👧‍👦 日本語のテキスト</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Kaydırma

Her öğeye yer olmadığında menü görünüm alanı içinde kayar ve vurgulanan öğe görünüme kayar.

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuScrolling() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        40 documents
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        {Array.from({ length: 40 }, (_, index) => (
          <DropdownMenuItem key={index}>Document {index + 1}</DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Sheet içinde

Menü sheet'in üstünde katmanlanır. Escape önce menüyü, sonra sheet'i kapatır.

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Sheet,
  SheetBody,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function DropdownMenuInSheet() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Open sheet
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Sheet</SheetTitle>
          <SheetDescription>
            The menu layers above the sheet, and Escape closes only the menu.
          </SheetDescription>
        </SheetHeader>
        <SheetBody>
          <DropdownMenu>
            <DropdownMenuTrigger render={<Button variant="outline" />}>
              Open menu
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem>Copy</DropdownMenuItem>
              <DropdownMenuSub>
                <DropdownMenuSubTrigger>Share</DropdownMenuSubTrigger>
                <DropdownMenuSubContent>
                  <DropdownMenuItem>Email</DropdownMenuItem>
                  <DropdownMenuItem>Link</DropdownMenuItem>
                </DropdownMenuSubContent>
              </DropdownMenuSub>
            </DropdownMenuContent>
          </DropdownMenu>
        </SheetBody>
      </SheetContent>
    </Sheet>
  )
}

Sağdan sola

Menü, alt menü oku ve alt menü tarafı trigger'ın yönünü izler. Kısayollar soldan sağa sıralarını korur.

import {
  IconChevronDown,
  IconLogout,
  IconUser,
  IconUserPlus,
} from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuRtl() {
  return (
    <div dir="rtl">
      <DropdownMenu>
        <DropdownMenuTrigger render={<Button variant="outline" />}>
          الحساب
          <IconChevronDown data-icon="inline-end" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <IconUser />
            الملف الشخصي
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuCheckboxItem defaultChecked>
            إظهار الشريط
          </DropdownMenuCheckboxItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <IconUserPlus />
              دعوة
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuItem>بريد</DropdownMenuItem>
              <DropdownMenuItem>رسالة</DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuSeparator />
          <DropdownMenuItem variant="destructive">
            <IconLogout />
            تسجيل الخروج
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}

Klavye

TuşAction
EnterSpace↓Trigger üzerinde, menüyü açar ve ilk öğeyi vurgular.
↓Sonraki öğeyi vurgular; sonda başa sarar.
↑Önceki öğeyi vurgular; başta sona sarar.
Homeİlk öğeyi vurgular.
EndSon öğeyi vurgular.
EnterSpaceVurgulanan öğeyi çalıştırır. Checkbox ve radio öğeleri değişir ve menüyü açık tutar.
→Vurgulanan alt menüyü açar ve içine geçer. Sağdan sola düzenlerde ←.
←Geçerli alt menüyü kapatır ve trigger'ına döner. Sağdan sola düzenlerde →.
EscGeçerli menüyü kapatır ve odağı trigger'ına geri verir. Bir alt menüde yalnızca o alt menü kapanır.
A–ZO harfle başlayan sonraki öğeyi vurgular.

Erişilebilirlik

  • Trigger bir menü düğmesi olarak duyurulur ve menü kapandığında odak ona geri döner.
  • Yalnızca simgeli trigger'lara, satır eylemleri örneğindeki gibi bir aria-label verin.
  • <DropdownMenuShortcut /> yalnızca görsel bir etikettir. Tuşları kendiniz bağlayın.
  • Azaltılmış hareket açıkken menü ölçeklenmeden solar ve öğe yanıp sönmesi atlanır.

API referansı

Base UI menu üzerine kuruludur. Her parça, sardığı primitive'in prop'larını kabul eder.

DropdownMenu

PropTürVarsayılan
open
boolean–
defaultOpen
booleanfalse
showSafeAreaMenü açıkken alt menü güvenli alanını çizer. Hata ayıklama ve demolar için.
booleanfalse
onOpenChangedetails.reason değişikliğe neyin yol açtığını belirtir.
(open: boolean, details) => void–
modalAçıkken sayfa kaydırmasını kilitler ve dış tıklamaları engeller.
booleantrue
loopFocusOk tuşlarını iki uçta da sarın.
booleantrue
handleAyrılmış trigger'ları bu menüye bağlar.
DropdownMenuHandle<Payload>–
childrenAçan trigger'ın payload'unu okumak için fonksiyon biçimini kullanın.
ReactNode | ({ payload }) => ReactNode–
disabled
booleanfalse

DropdownMenuTrigger

PropTürVarsayılan
openOnHover
booleanfalse
delayÜzerine gelmenin menüyü açmasından önceki milisaniye.
number100
closeDelayÜzerine gelince açılan bir menünün kapanmasından önceki milisaniye.
number0
handle
DropdownMenuHandle<Payload>–
payloadBu trigger menüyü açtığında menüye geçirilir.
Payload–
disabled
booleanfalse
render
ReactElement | (props, state) => ReactElement<button>
ÖznitelikAçıklama
data-slot="dropdown-menu-trigger"CSS'te tetikleyiciyi hedefleyin.
data-popup-openMenüsü açıkken bulunur.
data-pressedTetikleyiciye basılıyken bulunur.
data-disabledTrigger devre dışıyken bulunur.

DropdownMenuContent

PropTürVarsayılan
side
"top" | "bottom" | "left" | "right" | "inline-start" | "inline-end""bottom"
align
"start" | "center" | "end""start"
sideOffset
number4
alignOffset
number0
collisionPaddingMenü ile görünüm alanı kenarı arasında bırakılan boşluk.
number | Rect8
anchorTrigger yerine başka bir öğeye göre konumlandırın.
Element | RefObject | VirtualElement–
sticky
booleanfalse
render
ReactElement | (props, state) => ReactElement<div>
ÖznitelikAçıklama
data-slot="dropdown-menu-content"CSS'te menüyü hedefleyin.
data-openMenü açıkken bulunur.
data-starting-styleMenü açılma animasyonu sırasında bulunur.
data-ending-styleMenü kapanma animasyonu sırasında bulunur.
data-sideÇarpışma işlemesinden sonra menünün yerleştiği taraf.
data-alignYerleştiği hizalama.
data-chosenBir öğe tıklandıktan sonra bulunur; menü kapanmadan önce öğenin onay yanıp sönmesini bekler.
--anchor-widthTrigger'ın genişliği. Menü en az bu kadar geniştir.
--available-heightGörünüm alanında kalan yer. Uzun menüler içinde kayar.
--transform-originÖlçek animasyonunun büyüdüğü, trigger'ın yanındaki nokta.

DropdownMenuItem

PropTürVarsayılan
variant
"default" | "destructive""default"
insetÖğeyi checkbox öğeleriyle hizalamak için girintiler.
booleanfalse
closeOnClick
booleantrue
onClick
(event) => void–
labelAlt öğeler düz metin olmadığında type-ahead için kullanılan metin.
string–
disabled
booleanfalse
renderrender={<a href="…" />} ile bir bağlantı render edin.
ReactElement | (props, state) => ReactElement<div>
ÖznitelikAçıklama
data-slot="dropdown-menu-item"CSS'te öğeleri hedefleyin.
data-variantGeçerli varyant.
data-highlightedÖğe işaretçi veya klavye tarafından vurgulanırken bulunur.
data-disabledÖğe devre dışıyken bulunur.
data-chosenYanıp sönerken az önce tıklanan öğede bulunur.
data-insetinset ayarlandığında bulunur.

DropdownMenuCheckboxItem

PropTürVarsayılan
checked
boolean–
defaultChecked
booleanfalse
onCheckedChange
(checked: boolean, details) => void–
closeOnClick
booleanfalse
inset
booleanfalse
indicator
"start" | "end""start"
disabled
booleanfalse
ÖznitelikAçıklama
data-slot="dropdown-menu-checkbox-item"CSS'te checkbox öğelerini hedefleyin.
data-checkedİşaretliyken bulunur.
data-uncheckedİşaretli değilken bulunur.
data-highlightedÖğe işaretçi veya klavye tarafından vurgulanırken bulunur.
data-disabledÖğe devre dışıyken bulunur.
data-chosenYanıp sönerken az önce tıklanan öğede bulunur.
data-insetinset ayarlandığında bulunur.

DropdownMenuRadioGroup

PropTürVarsayılan
value
Value–
defaultValue
Value–
onValueChange
(value: Value, details) => void–
disabled
booleanfalse

DropdownMenuRadioItem

PropTürVarsayılan
value
Value–
closeOnClick
booleanfalse
inset
booleanfalse
indicator
"start" | "end""start"
disabled
booleanfalse
ÖznitelikAçıklama
data-slot="dropdown-menu-radio-item"CSS'te radio öğelerini hedefleyin.
data-checkedSeçili öğede bulunur.
data-uncheckedDiğer öğelerde bulunur.
data-highlightedÖğe işaretçi veya klavye tarafından vurgulanırken bulunur.
data-disabledÖğe devre dışıyken bulunur.
data-chosenYanıp sönerken az önce tıklanan öğede bulunur.
data-insetinset ayarlandığında bulunur.

DropdownMenuGroup

İlgili öğeleri gruplar. İçindeki bir <DropdownMenuLabel /> grubun erişilebilir adı olur.

DropdownMenuLabel

PropTürVarsayılan
inset
booleanfalse
render
ReactElement | (props, state) => ReactElement<div>

DropdownMenuSeparator

Gruplar arasındaki, ayırıcı olarak duyurulan bir bölücü.

DropdownMenuShortcut

PropTürVarsayılan
dirKısayollar sağdan sola menülerde tuş sıralarını korur.
"ltr" | "rtl""ltr"

DropdownMenuSub

PropTürVarsayılan
open
boolean–
defaultOpen
booleanfalse
onOpenChange
(open: boolean, details) => void–
closeParentOnEscEscape'te yalnızca bu alt menüyü değil, tüm menüyü kapatın.
booleanfalse

DropdownMenuSubTrigger

PropTürVarsayılan
inset
booleanfalse
disabled
booleanfalse
delayÜzerine gelmenin alt menüyü açmasından önceki milisaniye.
number100
closeDelay
number0
ÖznitelikAçıklama
data-slot="dropdown-menu-sub-trigger"CSS'te alt menü trigger'larını hedefleyin.
data-popup-openAlt menüsü açıkken bulunur.
data-highlightedVurgulanmışken bulunur.

DropdownMenuSubContent

PropTürVarsayılan
sideOffset
number0
alignOffset
number-4
render
ReactElement | (props, state) => ReactElement<div>
ÖznitelikAçıklama
data-slot="dropdown-menu-sub-content"CSS'te alt menüleri hedefleyin.
data-openMenü açıkken bulunur.
data-starting-styleMenü açılma animasyonu sırasında bulunur.
data-ending-styleMenü kapanma animasyonu sırasında bulunur.
data-sideÇarpışma işlemesinden sonra menünün yerleştiği taraf.
data-alignYerleştiği hizalama.
data-chosenBir öğe tıklandıktan sonra bulunur; menü kapanmadan önce öğenin onay yanıp sönmesini bekler.
--available-heightGörünüm alanında kalan yer. Uzun menüler içinde kayar.
--transform-originÖlçek animasyonunun büyüdüğü, trigger'ın yanındaki nokta.

İlgili

Kullanıldığı bloklar

Dropdown menu üzerine kurulan bloklar.