DropdownMenu

Bir butondan açılan aksiyon ya da seçenek listesi.

Son işlem: henüz yok

import { Button, DropdownMenu } from "@merid/react";

export function Example() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <Button variant="secondary">İşlemler</Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item trailing="⌘E" onSelect={() => edit()}>Düzenle</DropdownMenu.Item>
        <DropdownMenu.Item trailing="⌘D" onSelect={() => duplicate()}>Çoğalt</DropdownMenu.Item>
        <DropdownMenu.Item disabled>Taşı…</DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item onSelect={() => archive()}>Arşivle</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

Import

tsx

import { DropdownMenu } from "@merid/react";

Anatomi

tsx

<DropdownMenu.Root>
  <DropdownMenu.Trigger />
  <DropdownMenu.Content>
    <DropdownMenu.Label />
    <DropdownMenu.Group>
      <DropdownMenu.Item />
      <DropdownMenu.CheckboxItem />
    </DropdownMenu.Group>
    <DropdownMenu.Separator />
  </DropdownMenu.Content>
</DropdownMenu.Root>

Root açık/kapalı state'ini tutar. Kendisi bir eleman render'lamaz.
Trigger, aria-haspopup="menu" taşıyan bir <button>'dır.
Content, tetikleyiciye göre konumlanan ve portal'lanan role="menu" panelidir. Yalnızca açıkken mount edilir.
Item bir aksiyon çalıştırır ve menüyü kapatır. CheckboxItem bir ayarı açıp kapatır ve menüyü açık tutar.
Label, Group ve Separator uzun menüleri düzenler.

Örnekler

Checkbox öğeleri

CheckboxItem controlled (checked + onCheckedChange) ya da uncontrolled (defaultChecked) çalışır. Birini seçmek menüyü kapatmaz.

const [grid, setGrid] = useState(true);

<DropdownMenu.Root>
  <DropdownMenu.Trigger asChild>
    <Button variant="secondary">Görünüm</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Label>Ekran</DropdownMenu.Label>
    <DropdownMenu.CheckboxItem checked={grid} onCheckedChange={setGrid}>
      Izgarayı göster
    </DropdownMenu.CheckboxItem>
    <DropdownMenu.CheckboxItem defaultChecked>Kılavuzlara hizala</DropdownMenu.CheckboxItem>
    <DropdownMenu.CheckboxItem>Cetvelleri göster</DropdownMenu.CheckboxItem>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Konum

placement herhangi bir Floating UI konumunu kabul eder ("top", "bottom-end", "right-start"…). Menü viewport içinde kalmak için yön değiştirir ve kayar.

<DropdownMenu.Root>
  <DropdownMenu.Trigger asChild>
    <Button variant="secondary">Üstte, sona hizalı açılır</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content placement="top-end" sideOffset={8}>
    <DropdownMenu.Item>Yeniden adlandır</DropdownMenu.Item>
    <DropdownMenu.Item>Paylaş</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Menüyü açık tutmak

onSelect iptal edilebilir bir event alır. Bir öğe seçildikten sonra menünün açık kalması için event.preventDefault() çağır.

tsx

<DropdownMenu.Item onSelect={(event) => { event.preventDefault(); refresh(); }}>
  Yenile
</DropdownMenu.Item>

API referansı

Root

Prop	Tip	Varsayılan	Açıklama
`open`	`boolean`	–	Controlled açık/kapalı state'i.
`defaultOpen`	`boolean`	`false`	Uncontrolled kullanımda başlangıç state'i.
`onOpenChange`	`(open: boolean) => void`	–	Açık/kapalı state'i değişmesi gerektiğinde çağrılır.
`children`	`ReactNode`	–	Trigger ve Content.

Trigger

Tüm <button> attribute'larını kabul eder. type varsayılan olarak "button"'dır (asChild kullanıldığında atanmaz).

Prop	Tip	Varsayılan	Açıklama
`asChild`	`boolean`	`false`	`<button>` yerine tek child elemanı (örneğin kendi `Button`'ını) render'lar; props, ref ve handler'ları birleştirir.
`ref`	`Ref<HTMLButtonElement>`	–	Butona iletilen ref.

Content

Tüm <div> attribute'larını kabul eder.

Prop	Tip	Varsayılan	Açıklama
`placement`	`Placement`	`"bottom-start"`	Tetikleyiciye göre tercih edilen konum.
`sideOffset`	`number`	`6`	Tetikleyiciye px cinsinden uzaklık.
`container`	`Element \| null`	`document.body`	Portal hedefi. `undefined` verilirse `document.body` kullanılır; `null` verilirse hedef oluşana kadar hiçbir şey render'lanmaz.
`ref`	`Ref<HTMLDivElement>`	–	Menü elemanına iletilen ref.

onSelect dışındaki tüm <div> attribute'larını kabul eder. Senin onClick, onKeyDown ve onPointerMove handler'ların önce çalışır; yerleşik davranışı (aktivasyon, vurgulama) atlamak için içlerinde event.preventDefault() çağır.

Prop	Tip	Varsayılan	Açıklama
`onSelect`	`(event: Event) => void`	–	Öğe tıklama, Enter ya da Space ile seçildiğinde çağrılır. Menüyü açık tutmak için preventDefault çağır.
`disabled`	`boolean`	`false`	Öğeyi devre dışı bırakır; ok tuşları onu atlar.
`textValue`	`string`	–	Children düz metin olmadığında typeahead için kullanılan metin.
`leading`	`ReactNode`	–	Etiketten önce gösterilen ikon ya da eleman.
`trailing`	`ReactNode`	–	Etiketten sonra gösterilen kısayol ipucu ya da eleman.
`ref`	`Ref<HTMLDivElement>`	–	Öğe elemanına iletilen ref.

CheckboxItem

onSelect dışındaki tüm <div> attribute'larını kabul eder; handler'lar Item'daki gibi birleştirilir. leading render'lanmaz; onun yerini tik işareti alır.

Prop	Tip	Varsayılan	Açıklama
`checked`	`boolean`	–	Controlled işaretli state'i.
`defaultChecked`	`boolean`	`false`	Uncontrolled kullanımda başlangıçtaki işaretli state.
`onCheckedChange`	`(checked: boolean) => void`	–	Yeni işaretli state ile çağrılır. Menü açık kalır.
`disabled`	`boolean`	`false`	Öğeyi devre dışı bırakır; ok tuşları onu atlar.
`textValue`	`string`	–	Children düz metin olmadığında typeahead için kullanılan metin.
`trailing`	`ReactNode`	–	Etiketten sonra gösterilen kısayol ipucu ya da eleman.
`ref`	`Ref<HTMLDivElement>`	–	Öğe elemanına iletilen ref.

Group, Label, Separator

Üçü de tüm <div> attribute'larını kabul eder. Group, role="group" render'lar; ona bir aria-label ver. Label sunumsal bir metindir; Separator, role="separator" render'lar.

Stil verme

Sınıf	Eleman
`.mrd-menu`	Content paneli
`.mrd-menu__item`	Item ve CheckboxItem
`.mrd-menu__leading`, `.mrd-menu__trailing`	Baştaki ikon, sondaki ipucu
`.mrd-menu__label-text`	Öğe metni
`.mrd-menu__check`	CheckboxItem'ın tik slot'u
`.mrd-menu__label`	Label
`.mrd-menu__separator`	Separator

Attribute	Nerede	Değerler
`data-state`	Trigger (ya da `asChild` elemanı)	`open`, `closed`
`data-state`	Content	`open`
`data-state`	CheckboxItem	`checked`, `unchecked`
`data-disabled`	Item, CheckboxItem	devre dışıyken bulunur

Erişilebilirlik

WAI-ARIA Menu Button desenini izler. Tetikleyici aria-haspopup="menu", aria-expanded ve aria-controls taşır; menüyü tetikleyici etiketler. Açılınca focus menünün içine geçer; Escape ile ya da bir seçim yapılınca tetikleyiciye döner.

Tuş	Ne yapar
`Enter`	Tetikleyicide: menüyü açar ve ilk öğeye focus verir. Bir öğede: öğeyi çalıştırır.
`Space`	Tetikleyicide: menüyü açar ve ilk öğeye focus verir. Bir öğede: öğeyi çalıştırır.
`ArrowDown`	Tetikleyicide: menüyü ilk öğede açar. Menüde: sonraki öğe; sona gelince başa döner.
`ArrowUp`	Tetikleyicide: menüyü son öğede açar. Menüde: önceki öğe; başa gelince sona döner.
`Home`	İlk öğe.
`End`	Son öğe.
`A–Z`	Yazılan metinle başlayan bir sonraki öğeye gider (typeahead).
`Escape`	Menüyü kapatır ve focus'u tetikleyiciye döndürür.
`Tab`	Menüyü kapatır ve focus'u sonraki elemana taşır.

Kullanım ilkeleri

Yap

Menüyü bir nesne üzerindeki ikincil aksiyonlar için kullan (yeniden adlandır, çoğalt, arşivle) ve etiketleri bir fiil ya da kısa bir ifadeyle sınırla.

Kaçın

Bir form değeri seçmek için menü kullanmak. Listeden tek bir değer seçmek için Select var.

Yap

Yıkıcı aksiyonları bir separator'dan sonra, en sona koy.

Kaçın

Primary bir aksiyona ulaşmanın tek yolunu bir menünün içine saklamak.

İlgili sayfalar

Select: bir form için tek değer seçmek.
Popover: içeriği serbest, modal olmayan panel.
Button: tetikleyicinin olağan görünümü.