Context menu

Sağ tık ya da uzun basışla açılan eylem menüsü; alt menüler, onay kutusu ve radyo öğeleri ile dokunmatik ekranda basılı tutma geri bildirimi içerir.

Right click here

Last action: Nothing yet

"use client"

import * as React from "react"

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export function ContextMenuDemo() {
  const [bookmarks, setBookmarks] = React.useState(true)
  const [urls, setUrls] = React.useState(false)
  const [person, setPerson] = React.useState("pedro")
  const [last, setLast] = React.useState("Nothing yet")

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <ContextMenu>
        <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
          Right click here
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem inset onClick={() => setLast("Back")}>
            Back
            <ContextMenuShortcut>⌘[</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuItem inset disabled>
            Forward
            <ContextMenuShortcut>⌘]</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuItem inset onClick={() => setLast("Reload")}>
            Reload
            <ContextMenuShortcut>⌘R</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuSub>
            <ContextMenuSubTrigger inset>More tools</ContextMenuSubTrigger>
            <ContextMenuSubContent>
              <ContextMenuItem onClick={() => setLast("Save page")}>
                Save page as…
                <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
              </ContextMenuItem>
              <ContextMenuItem onClick={() => setLast("Create shortcut")}>
                Create shortcut…
              </ContextMenuItem>
              <ContextMenuItem onClick={() => setLast("Name window")}>
                Name window…
              </ContextMenuItem>
              <ContextMenuSeparator />
              <ContextMenuItem onClick={() => setLast("Developer tools")}>
                Developer tools
              </ContextMenuItem>
            </ContextMenuSubContent>
          </ContextMenuSub>
          <ContextMenuSeparator />
          <ContextMenuCheckboxItem
            checked={bookmarks}
            onCheckedChange={setBookmarks}
          >
            Show bookmarks bar
            <ContextMenuShortcut>⇧⌘B</ContextMenuShortcut>
          </ContextMenuCheckboxItem>
          <ContextMenuCheckboxItem checked={urls} onCheckedChange={setUrls}>
            Show full URLs
          </ContextMenuCheckboxItem>
          <ContextMenuSeparator />
          <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
            <ContextMenuLabel inset>People</ContextMenuLabel>
            <ContextMenuRadioItem value="pedro">
              Pedro Duarte
            </ContextMenuRadioItem>
            <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
          </ContextMenuRadioGroup>
        </ContextMenuContent>
      </ContextMenu>
      <p className="text-sm text-muted-foreground">Last action: {last}</p>
    </div>
  )
}

Kurulum

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

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

Henüz eklemediyseniz tema token'larını global CSS'inize ekleyin.

Bağımlılıkları yükleyin.

pnpm add @base-ui/react @tabler/icons-react class-variance-authority cn

3
Aşağıdaki kodu kopyalayıp projenize yapıştırın.
components/ui/context-menu.tsx
"use client" import * as React from "react" import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu" import { DirectionProvider, useDirection, type TextDirection,
İçe aktarma yollarını proje yapılandırmanıza uyacak şekilde güncelleyin.

Kullanım

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Kompozisyon

ContextMenu
├── ContextMenuTrigger
└── ContextMenuContent
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   └── ContextMenuItem
    │       └── ContextMenuShortcut
    ├── ContextMenuCheckboxItem
    ├── ContextMenuRadioGroup
    │   └── ContextMenuRadioItem
    ├── ContextMenuSeparator
    └── ContextMenuSub
        ├── ContextMenuSubTrigger
        └── ContextMenuSubContent

Örnekler

Dosya listesi

Her satıra kendi menüsünü verin. Açık satır vurgulu kalır ve yıkıcı bir öğe onay için bir alert dialog'a devreder.

"use client"

import * as React from "react"
import {
  IconCopy,
  IconDownload,
  IconFile,
  IconFolder,
  IconLink,
  IconMail,
  IconPencil,
  IconRefresh,
  IconShare,
  IconStar,
  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 {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

const files = [
  { name: "Quarterly report.pdf", kind: "file" },
  { name: "Brand assets", kind: "folder" },
  { name: "Roadmap 2027.md", kind: "file" },
] as const

function FileRow({
  name,
  kind,
  onDelete,
}: {
  name: string
  kind: "file" | "folder"
  onDelete: () => void
}) {
  const [starred, setStarred] = React.useState(false)
  const Icon = kind === "folder" ? IconFolder : IconFile

  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm hover:bg-muted/50 data-popup-open:bg-muted">
        <Icon className="size-4 text-muted-foreground" aria-hidden />
        <span className="min-w-0 flex-1 truncate">{name}</span>
        {starred ? (
          <IconStar
            className="size-4 text-muted-foreground"
            aria-label="Starred"
          />
        ) : null}
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          <IconPencil />
          Rename…
        </ContextMenuItem>
        <ContextMenuItem>
          <IconCopy />
          Duplicate
          <ContextMenuShortcut>⌘D</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <IconDownload />
          Download
        </ContextMenuItem>
        <ContextMenuCheckboxItem checked={starred} onCheckedChange={setStarred}>
          Starred
        </ContextMenuCheckboxItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>
            <IconShare />
            Share
          </ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>
              <IconMail />
              Email
            </ContextMenuItem>
            <ContextMenuItem>
              <IconLink />
              Copy link
            </ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive" onClick={onDelete}>
          <IconTrash />
          Delete
          <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

export function ContextMenuFileList() {
  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">
      <div className="flex flex-col gap-0.5 rounded-xl border p-1">
        {files
          .filter((file) => !removed.includes(file.name))
          .map((file) => (
            <FileRow
              key={file.name}
              name={file.name}
              kind={file.kind}
              onDelete={() => setPending(file.name)}
            />
          ))}
      </div>
      <div>
        <Button variant="outline" size="sm" onClick={() => setRemoved([])}>
          <IconRefresh />
          Restore files
        </Button>
      </div>
      <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>
  )
}

State'i kendiniz yönetmek için open ve onOpenChange geçin. İkinci argüman trigger-press, outside-press veya escape-key gibi değişimin nedenini söyler. closeOnClick={false} olan öğeler menüyü açık tutar.

"use client"

import * as React from "react"
import { IconCopy, IconScissors } from "@tabler/icons-react"

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

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

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <ContextMenu
        open={open}
        onOpenChange={(next, details) => {
          setOpen(next)
          setReason(details.reason)
        }}
      >
        <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
          Controlled area
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem>
            <IconScissors />
            Cut
          </ContextMenuItem>
          <ContextMenuItem>
            <IconCopy />
            Copy
          </ContextMenuItem>
          <ContextMenuItem closeOnClick={false}>
            Stays open on click
          </ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
      <p className="text-sm text-muted-foreground">
        Open: {String(open)} · last reason: {reason}
      </p>
    </div>
  )
}

Devre dışı

Devre dışı bir <ContextMenu /> alanı tarayıcının kendi menüsüne geri verir. Devre dışı öğeler görünür kalır ancak klavye tarafından atlanır.

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

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export function ContextMenuDisabled() {
  return (
    <div className="grid w-full max-w-lg gap-3 sm:grid-cols-2">
      <ContextMenu disabled>
        <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
          Disabled menu
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem>Never shown</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
      <ContextMenu>
        <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
          Disabled items
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem>Enabled</ContextMenuItem>
          <ContextMenuItem disabled>Disabled item</ContextMenuItem>
          <ContextMenuItem variant="destructive" disabled>
            <IconTrash />
            Disabled destructive
          </ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
    </div>
  )
}

Basılı tutma geri bildirimi

Dokunmatik ekranlarda menü uzun basıştan sonra açılır. Parmak basılıyken alan hafifçe küçülür; böylece kişiler basışın algılandığını anlar. Parmağı hareket ettirmek iptal eder. Kapatmak için holdFeedback={false} ayarlayın.

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export function ContextMenuHoldFeedback() {
  return (
    <div className="grid w-full max-w-lg gap-3 sm:grid-cols-2">
      <ContextMenu>
        <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
          Press and hold
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem>Copy</ContextMenuItem>
          <ContextMenuItem>Paste</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
      <ContextMenu>
        <ContextMenuTrigger
          holdFeedback={false}
          className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground"
        >
          No hold feedback
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem>Copy</ContextMenuItem>
          <ContextMenuItem>Paste</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
    </div>
  )
}

Uzun içerik

Uzun etiketler 20rem azami genişlik içinde sarar ve uzun menüler görünüm alanında kalan alan içinde kayar.

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

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export function ContextMenuLongContent() {
  return (
    <div className="grid w-full max-w-lg gap-3 sm:grid-cols-2">
      <ContextMenu>
        <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
          Long labels
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuLabel>
            A label that goes on for much longer than any menu label should
          </ContextMenuLabel>
          <ContextMenuItem>
            <IconFile />
            Move to “Supercalifragilisticexpialidocious project archive 2026”
            <ContextMenuShortcut>⌥⌘M</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuItem>
            https://example.com/a/really/long/url/without/any/spaces/at/all/in/it
          </ContextMenuItem>
          <ContextMenuItem>مرحبا بالعالم — mixed العربية text</ContextMenuItem>
          <ContextMenuItem>👩‍👩‍👧‍👦 Family 日本語のテキスト</ContextMenuItem>
          <ContextMenuItem>Short</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
      <ContextMenu>
        <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
          40 items
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuLabel>Recent</ContextMenuLabel>
            {Array.from({ length: 40 }, (_, index) => (
              <ContextMenuItem key={index}>
                Document {index + 1}
              </ContextMenuItem>
            ))}
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </div>
  )
}

İç içe alt menüler

Alt menüler herhangi bir derinlikte üzerine gelince veya ok tuşlarıyla açılır. Devre dışı bir alt menü trigger'ı asla açılmaz.

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export function ContextMenuNested() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-40 w-full max-w-sm items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
        Three levels deep
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Open</ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuItem>Inbox</ContextMenuItem>
            <ContextMenuSub>
              <ContextMenuSubTrigger>Projects</ContextMenuSubTrigger>
              <ContextMenuSubContent>
                <ContextMenuItem>Acme</ContextMenuItem>
                <ContextMenuSub>
                  <ContextMenuSubTrigger>Archive</ContextMenuSubTrigger>
                  <ContextMenuSubContent>
                    <ContextMenuItem>2024</ContextMenuItem>
                    <ContextMenuItem>2025</ContextMenuItem>
                  </ContextMenuSubContent>
                </ContextMenuSub>
              </ContextMenuSubContent>
            </ContextMenuSub>
            <ContextMenuSub disabled>
              <ContextMenuSubTrigger disabled>Locked</ContextMenuSubTrigger>
              <ContextMenuSubContent>
                <ContextMenuItem>Hidden</ContextMenuItem>
              </ContextMenuSubContent>
            </ContextMenuSub>
          </ContextMenuSubContent>
        </ContextMenuSub>
        <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Sheet içinde

Menü diğer bindirmelerin üstünde katmanlanır ve Escape yalnızca menüyü kapatır, arkadaki sheet'i kapatmaz.

import { Button } from "@/components/ui/button"
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
import {
  Sheet,
  SheetBody,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

export function ContextMenuInSheet() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>
        Open sheet
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Inside a sheet</SheetTitle>
          <SheetDescription>
            The menu layers above the sheet and Escape closes only the menu.
          </SheetDescription>
        </SheetHeader>
        <SheetBody>
          <ContextMenu>
            <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
              Right click here
            </ContextMenuTrigger>
            <ContextMenuContent>
              <ContextMenuItem>Copy</ContextMenuItem>
              <ContextMenuItem>Paste</ContextMenuItem>
            </ContextMenuContent>
          </ContextMenu>
        </SheetBody>
      </SheetContent>
    </Sheet>
  )
}

Başka bir öğe olarak render edin

Trigger'ı bir figure gibi herhangi bir öğe yapmak veya bir öğeyi bağlantıya dönüştürmek için render kullanın.

import { IconDownload, IconLink } from "@tabler/icons-react"

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export function ContextMenuRender() {
  return (
    <ContextMenu>
      <ContextMenuTrigger
        render={<figure />}
        className="flex w-full max-w-xs flex-col gap-2 rounded-xl border p-3"
      >
        <div className="h-28 rounded-lg bg-muted" />
        <figcaption className="text-sm text-muted-foreground">
          Trigger rendered as a figure
        </figcaption>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>
          <IconDownload />
          Save image
        </ContextMenuItem>
        <ContextMenuItem render={<a href="#render-as-another-element" />}>
          <IconLink />
          Link item
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

Sağdan sola

Menü trigger'ın yönünü okur; böylece alt menüler sola açılır ve ok tuşları ters döner.

import { IconArrowLeft, IconArrowRight, IconTrash } from "@tabler/icons-react"

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export function ContextMenuRtl() {
  return (
    <div dir="rtl" className="w-full max-w-sm">
      <ContextMenu>
        <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
          انقر بزر الفأرة الأيمن هنا
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem>
            <IconArrowRight />
            رجوع
            <ContextMenuShortcut>⌘[</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuItem>
            <IconArrowLeft />
            تقدم
          </ContextMenuItem>
          <ContextMenuCheckboxItem defaultChecked>
            إظهار الشريط
          </ContextMenuCheckboxItem>
          <ContextMenuSub>
            <ContextMenuSubTrigger>مشاركة</ContextMenuSubTrigger>
            <ContextMenuSubContent>
              <ContextMenuItem>بريد</ContextMenuItem>
              <ContextMenuItem>نسخ الرابط</ContextMenuItem>
            </ContextMenuSubContent>
          </ContextMenuSub>
          <ContextMenuSeparator />
          <ContextMenuItem variant="destructive">
            <IconTrash />
            حذف
          </ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
    </div>
  )
}

Klavye

Tuş	Action
`↓`	Sonraki öğeyi vurgular; sonda başa sarar.
`↑`	Önceki öğeyi vurgular; başta sona sarar.
`Home`	İlk öğeyi vurgular.
`End`	Son öğeyi vurgular.
`EnterSpace`	Vurgulanan öğ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 →.
`Esc`	Geçerli menüyü kapatır. Bir alt menüde yalnızca o alt menü kapanır.
`A–Z`	O harfle başlayan sonraki öğeyi vurgular.

Erişilebilirlik

Bir context menu bir kısayoldur. Çoğu kişi sağ tıklamadığı veya uzun basmadığı için içindeki her eyleme görünür bir düğme veya dropdown menü gibi başka bir yolla da ulaşılabilmelidir.
Tarayıcılar odaklı bir öğede Shift F10 ve Menu tuşu için de context menu olayını tetikler; bu yüzden trigger'ın içindeki odaklanabilir bir öğe klavye kullanıcılarının menüyü açmasını sağlar.
<ContextMenuShortcut /> içindeki kısayollar yalnızca etikettir. Tuşları kendiniz bağlayın.
Azaltılmış hareket açıkken basılı tutma geri bildirimi ve öğe yanıp sönmesi atlanır; menü yalnızca solar.

API referansı

Base UI context menu üzerine kuruludur. Her parça, sardığı primitive'in prop'larını ve parçanın state'ini alan bir fonksiyon className'i kabul eder.

ContextMenu

Prop	Tür	Varsayılan
`open`	`boolean`	`–`
`defaultOpen`	`boolean`	`false`
`onOpenChange`details.reason değişikliğe neyin yol açtığını belirtir.	`(open: boolean, details) => void`	`–`
`onOpenChangeComplete`Açılma veya kapanma animasyonu bittikten sonra çalışır.	`(open: boolean) => void`	`–`
`disabled`Bunun yerine tarayıcının yerel menüsünü gösterir.	`boolean`	`false`
`loopFocus`Ok tuşuyla gezinmeyi uçlarda sarın.	`boolean`	`true`
`highlightItemOnHover`	`boolean`	`true`
`actionsRef`Menüyü kod üzerinden kapatın.	`RefObject<{ close, unmount }>`	`–`

ContextMenuTrigger

Prop	Tür	Varsayılan
`holdFeedback`Dokunmatik ekranlarda uzun basış sürerken alanı hafifçe küçültün.	`boolean`	`true`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Öznitelik	Açıklama
`data-slot="context-menu-trigger"`	CSS'te tetikleyiciyi hedefleyin.
`data-popup-open`	Menüsü açıkken bulunur.
`data-holding`	Uzun basış sürerken bulunur.
`data-pressed`	Tetikleyiciye basılıyken bulunur.

ContextMenuContent

Prop	Tür	Varsayılan
`side`İşaretçiye göre tercih edilen taraf.	`"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"`	`"bottom"`
`align`	`"start" \| "center" \| "end"`	`"start"`
`sideOffset`	`number`	`0`
`alignOffset`	`number`	`0`
`collisionPadding`Menü ile görünüm alanı kenarları arasında bırakılacak boşluk.	`number \| { top, right, bottom, left }`	`–`
`collisionAvoidance`Menü taşacağı zaman nasıl ters döner veya kayar.	`CollisionAvoidance`	`–`
`anchor`İşaretçiden başka bir şeye göre konumlandırın.	`Element \| VirtualElement \| RefObject`	`–`
`finalFocus`Menü kapandıktan sonra odağın gittiği yer.	`boolean \| RefObject \| (closeType) => HTMLElement \| boolean`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Öznitelik	Açıklama
`data-slot="context-menu-content"`	Menü popup'ı.
`data-open`	Açıkken bulunur.
`data-starting-style`	Menü açılma animasyonu sırasında bulunur.
`data-ending-style`	Menü kapanma animasyonu sırasında bulunur.
`data-side`	Çarpışmalardan sonra yerleştirildiği taraf.
`data-chosen`	Bir öğe tıklandıktan sonra bulunur. Solarak kaybolma, yanıp sönmeyi bekler.
`--transform-origin`	Ölçek animasyonunun büyüdüğü nokta.
`--available-height`	Görünüm alanında kalan alan. Menü yüksekliğini sınırlar.

ContextMenuItem

Prop	Tür	Varsayılan
`variant`	`"default" \| "destructive"`	`"default"`
`inset`Etiketi checkbox öğeleriyle hizalamak için girintileyin.	`boolean`	`false`
`onClick`Tıklamada, Enter'da veya Space'te çalışır. Menü kısa bir yanıp sönmeden sonra kapanır.	`(event) => void`	`–`
`closeOnClick`	`boolean`	`true`
`disabled`	`boolean`	`false`
`label`Alt öğeler düz metin olmadığında typeahead için kullanılan metin.	`string`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Öznitelik	Açıklama
`data-slot="context-menu-item"`	CSS'te öğeleri hedefleyin.
`data-variant`	Geçerli varyant.
`data-highlighted`	İşaretçinin veya klavye odağının altındaki öğede bulunur.
`data-disabled`	Öğe devre dışıyken bulunur.
`data-inset`	inset ayarlandığında bulunur.
`data-chosen`	Yanıp sönerken tıklanan öğede bulunur.

ContextMenuCheckboxItem

Prop	Tür	Varsayılan
`checked`	`boolean`	`–`
`defaultChecked`	`boolean`	`false`
`onCheckedChange`	`(checked: boolean, details) => void`	`–`
`closeOnClick`	`boolean`	`false`
`inset`	`boolean`	`false`
`disabled`	`boolean`	`false`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Öznitelik	Açıklama
`data-slot="context-menu-checkbox-item"`	CSS'te checkbox öğelerini hedefleyin.
`data-checked`	İşaretliyken bulunur.
`data-unchecked`	İşaretsizken bulunur.
`data-highlighted`	İşaretçinin veya klavye odağının altındaki öğede bulunur.
`data-disabled`	Öğe devre dışıyken bulunur.
`data-inset`	inset ayarlandığında bulunur.
`data-chosen`	Yanıp sönerken tıklanan öğede bulunur.

ContextMenuRadioGroup

Prop	Tür	Varsayılan
`value`	`any`	`–`
`defaultValue`	`any`	`–`
`onValueChange`	`(value: any, details) => void`	`–`
`disabled`	`boolean`	`false`

ContextMenuRadioItem

Prop	Tür	Varsayılan
`value`	`any`	`–`
`closeOnClick`	`boolean`	`false`
`inset`	`boolean`	`false`
`disabled`	`boolean`	`false`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Öznitelik	Açıklama
`data-slot="context-menu-radio-item"`	CSS'te radio öğelerini hedefleyin.
`data-checked`	Seçiliyken bulunur.
`data-highlighted`	İşaretçinin veya klavye odağının altındaki öğede bulunur.
`data-disabled`	Öğe devre dışıyken bulunur.
`data-inset`	inset ayarlandığında bulunur.
`data-chosen`	Yanıp sönerken tıklanan öğede bulunur.

ContextMenuLabel

Prop	Tür	Varsayılan
`inset`	`boolean`	`false`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

<ContextMenuGroup /> veya <ContextMenuRadioGroup /> içinde grubu yardımcı teknolojiler için etiketler. Başka yerde düz bir başlıktır.

ContextMenuSub

Prop	Tür	Varsayılan
`open`	`boolean`	`–`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean, details) => void`	`–`
`disabled`	`boolean`	`false`
`closeParentOnEsc`Escape'te yalnızca bu alt menüyü değil, tüm menüyü kapatın.	`boolean`	`false`

ContextMenuSubTrigger

Prop	Tür	Varsayılan
`inset`	`boolean`	`false`
`openOnHover`	`boolean`	`true`
`delay`Alt menü açılmadan önce üzerine gelme süresi, milisaniye olarak.	`number`	`100`
`closeDelay`	`number`	`0`
`disabled`	`boolean`	`false`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Öznitelik	Açıklama
`data-slot="context-menu-sub-trigger"`	CSS'te alt menü trigger'larını hedefleyin.
`data-popup-open`	Alt menüsü açıkken bulunur.
`data-highlighted`	Vurgulanmışken bulunur.
`data-disabled`	Devre dışıyken bulunur.

ContextMenuSubContent

Prop	Tür	Varsayılan
`side`Varsayılan olarak satır içi sona doğru açılır.	`"top" \| "right" \| "bottom" \| "left" \| "inline-start" \| "inline-end"`	`–`
`align`	`"start" \| "center" \| "end"`	`–`
`sideOffset`	`number`	`0`
`alignOffset`	`number`	`-4`
`collisionPadding`Menü ile görünüm alanı kenarları arasında bırakılacak boşluk.	`number \| { top, right, bottom, left }`	`–`
`collisionAvoidance`Menü taşacağı zaman nasıl ters döner veya kayar.	`CollisionAvoidance`	`–`
`anchor`İşaretçiden başka bir şeye göre konumlandırın.	`Element \| VirtualElement \| RefObject`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Öznitelik	Açıklama
`data-slot="context-menu-sub-content"`	Alt menü popup'ı. Menüyle aynı state niteliklerini alır.

ContextMenuShortcut

Prop	Tür	Varsayılan
`dir`⇧⌘S gibi kısayolları sağdan sola menülerde sırasında tutar.	`"ltr" \| "rtl"`	`"ltr"`

Öznitelik	Açıklama
`data-slot="context-menu-shortcut"`	Kısayol etiketi.

ContextMenuGroup ve ContextMenuSeparator

<ContextMenuGroup /> ilgili öğeleri bir etiket altında gruplar. <ContextMenuSeparator /> bir ayırıcı çizer. İkisi de render ve className kabul eder ve data-slot olarak context-menu-group ve context-menu-separator taşır.

Kullanıldığı bloklar

Context menu üzerine kurulan bloklar.

Chat SidebarBir sohbet uygulaması için kenar çubuğu. Üstte logo, arama ve Yeni sohbet, altında kendi bağlantılarınız, sabitlenmiş sohbetler, sohbetlerini göstermek için genişleyen projeler, güne göre gruplanmış son sohbetler ve hover ile sağ tık menüleri, satır içi yeniden adlandırma, geri alınabilir silme ve canlı yanıt durumları olan satırlar.