shadcn/ui Dropdown Menu, Context Menu ve Menubar Rehberi

Kurulum

Her bileşen kendi Radix paketini kullanır. CLI ile kurulumda paketler otomatik yüklenir; elle kurulumda ilgili paketi yükleyip kaynak dosyayı components/ui klasörüne kopyalarsınız.

npx shadcn@latest add dropdown-menu
npx shadcn@latest add context-menu
npx shadcn@latest add menubar

Belge sayfalarında Dropdown Menu ile Context Menu aynı açıklama cümlesini paylaşır; aralarındaki fark tetikleme biçimidir. Davranışın ayrıntıları Radix UI: Dropdown Menu, Radix UI: Context Menu ve Radix UI: Menubar sayfalarında anlatılır. Bileşen dosyalarının hepsi "use client" satırıyla başlar.

Ortak parçalar

Üç dosya da aynı yapıyı izler ve parça adları yalnızca ön ekleriyle ayrılır: DropdownMenuItem, ContextMenuItem ve MenubarItem aynı işi yapar. Aşağıdaki tabloda Dropdown Menu adları kullanılmıştır; diğer iki bileşende ön eki değiştirmeniz yeterlidir.

Kaynak koda göre menü öğeleri iki özel prop alır. inset verildiğinde öğe solda pl-8 boşluk bırakır; böylece onay işareti ya da simge taşımayan öğeler, işaretli öğelerle aynı hizada durur. variant ise "default" ya da "destructive" değerini alır; destructive öğeyi yıkıcı renkle, yani temadaki destructive değişkeniyle çizer. Silme gibi tehlikeli işlemleri bu varyantla işaretlemek, kullanıcının öğeyi diğerlerinden ayırt etmesini kolaylaştırır. disabled ise Radix'ten gelir ve öğeyi soluk, tıklanamaz gösterir.

DropdownMenuShortcut bileşeni yalnızca bir span öğesidir: sağa yaslanır, küçük ve geniş aralıklı yazılır. Klavye kısayolunu göstermekle yetinir, onu çalıştırmaz. Menüdeki "⌘B" yazısının gerçekten bir işe yaraması için klavye olayını kendiniz dinlemelisiniz; bunun bir örneği Command yazısındaki Ctrl/Cmd+K kancasıdır.

Dropdown Menu

shadcn/ui: Dropdown Menu sayfasındaki temel kullanım bir etiket, bir ayırıcı ve dört öğeden oluşur. Tetikleyiciye asChild ile kendi düğmenizi vermeniz, iç içe iki düğme oluşmasını önler.

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

export function HesapMenusu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Hesabım</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="start">
        <DropdownMenuLabel>Hesabım</DropdownMenuLabel>
        <DropdownMenuGroup>
          <DropdownMenuItem>
            Profil
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Faturalar
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>Ekip</DropdownMenuItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>Kullanıcı davet et</DropdownMenuSubTrigger>
            <DropdownMenuPortal>
              <DropdownMenuSubContent>
                <DropdownMenuItem>E-posta</DropdownMenuItem>
                <DropdownMenuItem>Mesaj</DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuPortal>
          </DropdownMenuSub>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem disabled>API</DropdownMenuItem>
        <DropdownMenuItem variant="destructive">Çıkış yap</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Bu örnek belgedeki demo dosyasının uyarlamasıdır. Düğmeye basıldığında 14rem (w-56) genişliğinde, düğmenin sol kenarına hizalı (align="start") bir menü açılır. "Kullanıcı davet et" öğesinin sağında kaynak kodun eklediği bir sağ ok simgesi görünür ve üzerine gelindiğinde alt menü açılır. "API" öğesi soluk ve tıklanamaz, son öğe ise yıkıcı renktedir. Kaynakta DropdownMenuContent varsayılan olarak sideOffset={4} alır, en az 8rem genişliğindedir ve sığmayan uzun listelerde dikey kaydırma çubuğu gösterir.

Simgeli öğeler ve kaynak koddaki stiller

Menü öğelerine simge eklemek için ayrı bir parça gerekmez; simgeyi metnin önüne koymanız yeterlidir. Kaynak koddaki öğe sınıfları içerideki svg öğelerini kendiliğinden düzenler: boyut sınıfı verilmemiş simgeler size-4 olur, renk sınıfı verilmemiş simgeler text-muted-foreground rengini alır ve simgeler tıklamaları engellemesin diye pointer-events-none ile işaretlenir. Öğe ile simge arasında gap-2 boşluğu bulunur. destructive varyantında simge de yıkıcı renge boyanır.

import { CreditCard, Settings, User } from "lucide-react"

<DropdownMenuContent className="w-56">
  <DropdownMenuItem>
    <User />
    Profil
  </DropdownMenuItem>
  <DropdownMenuItem>
    <CreditCard />
    Faturalar
  </DropdownMenuItem>
  <DropdownMenuItem>
    <Settings />
    Ayarlar
  </DropdownMenuItem>
</DropdownMenuContent>

Simge adları, belgedeki Command örneklerinde kullanılan lucide-react simgeleridir. Odak alan öğe focus:bg-accent ve focus:text-accent-foreground sınıflarıyla, temadaki accent renk çiftiyle vurgulanır. Devre dışı öğeler data-[disabled] özniteliğine bağlı sınıflarla yüzde 50 saydamlık alır ve tıklamaları almaz. Bu sınıfların hepsi projenize kopyalanan dosyada durduğu için menü yoğunluğunu ya da vurgu rengini tek dosyada değiştirebilirsiniz.

DropdownMenuContent bileşeninin yüksekliği de kaynakta sınırlandırılmıştır: Radix'in verdiği --radix-dropdown-menu-content-available-height değişkeni en yüksek değer olarak kullanılır ve içerik taşarsa dikey kaydırma açılır. Uzun listelerde menünün ekran dışına taşmaması bu sayede sağlanır. Menüyü tetikleyicinin sağ kenarına hizalamak için belgedeki dialog örneği gibi align="end" verebilirsiniz.

Onay kutulu öğeler

Bir görünüm ayarı gibi açılıp kapanan seçenekler için DropdownMenuCheckboxItem kullanılır. Öğe checked ile o anki değeri, onCheckedChange ile değişikliği alır; işaretliyken solda bir onay simgesi çizilir. Belgedeki örnek, değer tipini Radix paketinden DropdownMenuCheckboxItemProps["checked"] olarak alır.

"use client"

import * as React from "react"
import { type DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"

type Checked = DropdownMenuCheckboxItemProps["checked"]

export function GorunumMenusu() {
  const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
  const [showPanel, setShowPanel] = React.useState<Checked>(false)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Görünüm</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>Görünüm</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem
          checked={showStatusBar}
          onCheckedChange={setShowStatusBar}
        >
          Durum çubuğu
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem
          checked={showPanel}
          onCheckedChange={setShowPanel}
        >
          Panel
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Radyo grubu

Birden fazla seçenekten yalnızca biri seçilebiliyorsa DropdownMenuRadioGroup içine DropdownMenuRadioItem öğeleri koyarsınız. Grup value ve onValueChange alır, her öğe kendi value değerini taşır; seçili öğenin solunda küçük dolu bir daire görünür.

const [position, setPosition] = React.useState("bottom")

<DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
  <DropdownMenuRadioItem value="top">Üst</DropdownMenuRadioItem>
  <DropdownMenuRadioItem value="bottom">Alt</DropdownMenuRadioItem>
  <DropdownMenuRadioItem value="right">Sağ</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>

Menüden dialog açmak

Dropdown Menu sayfası, menüden dialog açmak için DropdownMenu bileşenine modal={false} verilmesini söyler. Belgedeki örnekte iki dialog vardır; menü öğelerinin onSelect olayı bir durum değişkenini true yapar ve dialoglar menünün dışında, bu değişkenlere bağlı kontrollü pencereler olarak tanımlanır.

const [showNewDialog, setShowNewDialog] = useState(false)

return (
  <>
    <DropdownMenu modal={false}>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" aria-label="Menüyü aç" size="icon-sm">
          <MoreHorizontalIcon />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-40" align="end">
        <DropdownMenuItem onSelect={() => setShowNewDialog(true)}>
          Yeni dosya...
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
    <Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Yeni dosya oluştur</DialogTitle>
          <DialogDescription>Dosyaya bir ad verin.</DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  </>
)

Bu kalıp, tablo satırlarındaki "..." menüleri için çok kullanışlıdır: tek bir menüden düzenleme, paylaşım ve silme pencereleri ayrı ayrı açılabilir. Dialog sayfası ise Context Menu için farklı bir yol önerir; ikisi de Dialog ve Alert Dialog yazısında ayrıntılı anlatılıyor. Satır menülerinin veri tablosundaki kullanımı için Data Table yazısına bakabilirsiniz.

Dropdown Menu'nün başka bileşenlerdeki kullanımı

Dropdown Menu belgelerin birçok yerinde yapı taşı olarak karşınıza çıkar. Data Table sayfası satır eylemleri için bir actions sütunu tanımlar; bu sütunun hücresi, yalnızca simge taşıyan bir ghost düğmeyle açılan ve içinde "Copy payment ID" gibi öğeler bulunan bir Dropdown Menu döndürür. Düğmenin içindeki sr-only metin, simge düğmesinin erişilebilir adını verir. Button Group sayfası bölünmüş düğme (split button) kalıbını, Breadcrumb sayfası daraltılmış yol parçalarını, Item ve Input Group sayfaları da kendi açılır menü örneklerini Dropdown Menu ile kurar. Combobox sayfasındaki bir örnek ise bir alt menünün içine aranabilir bir Command listesi yerleştirir ve alt menü içeriğini p-0 ile boşluksuz yapar. Bu örneklerin ayrıntıları Data Table, Button Group ve Breadcrumb yazılarında.

Context Menu: sağ tıklama menüsü

shadcn/ui: Context Menu sayfasındaki temel örnekte tetikleyici bir metindir ve menü bu alana sağ tıklandığında açılır. Belgedeki demo, tetikleyiciyi kesik çizgili kenarlıklı bir kutu olarak çizer ve içine geri, ileri, yenile öğeleri, bir alt menü, onay kutulu öğeler ve bir radyo grubu koyar.

<ContextMenu>
  <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Buraya sağ tıklayın
  </ContextMenuTrigger>
  <ContextMenuContent className="w-52">
    <ContextMenuItem inset>
      Geri
      <ContextMenuShortcut>⌘[</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem inset disabled>
      İleri
      <ContextMenuShortcut>⌘]</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger inset>Diğer araçlar</ContextMenuSubTrigger>
      <ContextMenuSubContent className="w-44">
        <ContextMenuItem>Sayfayı kaydet...</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">Sil</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuCheckboxItem checked>Yer imlerini göster</ContextMenuCheckboxItem>
    <ContextMenuSeparator />
    <ContextMenuRadioGroup value="ayse">
      <ContextMenuLabel inset>Kişiler</ContextMenuLabel>
      <ContextMenuRadioItem value="ayse">Ayşe</ContextMenuRadioItem>
      <ContextMenuRadioItem value="mehmet">Mehmet</ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>

Örnekte inset kullanımının amacı açıkça görülür: onay kutulu ve radyo öğelerinin solunda işaret için yer ayrılır, düz öğeler de inset ile aynı hizaya çekilir. Bu demo onay ve radyo değerlerini sabit verir; gerçek kullanımda Dropdown Menu örneklerindeki gibi onCheckedChange ve onValueChange ile duruma bağlarsınız. Context Menu'nün tetikleyicisi bir düğme değil, bir alan olduğu için ContextMenuTrigger bileşenine doğrudan className verilir.

Bir dosya listesinde her satıra ayrı bir sağ tıklama menüsü vermek istiyorsanız her satırı kendi ContextMenu bileşeniyle sarar, satırın kendisini tetikleyici yaparsınız. Menüdeki bir öğe silme onayı gibi bir pencere açacaksa, Dialog sayfasının notunu hatırlayın: ContextMenu bileşeni Dialog kökünün içine alınır ve öğe DialogTrigger asChild ile sarılır; DialogContent ise menü içeriğinin dışında, aynı kökün altında tanımlanır.

Menubar: masaüstü tarzı menü çubuğu

shadcn/ui: Menubar bileşeni diğer ikisinden yapısal olarak bir adım farklıdır: kök Menubar bileşeni çubuğun kendisidir ve içinde birden fazla MenubarMenu bulunur. Her MenubarMenu bir MenubarTrigger (çubuktaki başlık) ve bir MenubarContent (açılan liste) içerir.

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/menubar"

export function UygulamaMenusu() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>Dosya</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Yeni sekme <MenubarShortcut>⌘T</MenubarShortcut>
          </MenubarItem>
          <MenubarItem disabled>Yeni gizli pencere</MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Paylaş</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Bağlantıyı e-postayla gönder</MenubarItem>
              <MenubarItem>Notlar</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Görünüm</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem checked>Tam adresleri göster</MenubarCheckboxItem>
          <MenubarSeparator />
          <MenubarItem inset>Yeniden yükle</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

Kaynakta MenubarContent, Dropdown Menu'den farklı varsayılanlar taşır: align="start", alignOffset={-4} ve sideOffset={8}. Bu sayede liste başlığın sol kenarına yakın ve çubuktan biraz aşağıda açılır, masaüstü uygulamalarındaki görünüme benzer. Belgedeki demo dört menü içerir; dördüncüsü bir MenubarRadioGroup ile profil seçtirir.

<MenubarMenu>
  <MenubarTrigger>Profiller</MenubarTrigger>
  <MenubarContent>
    <MenubarRadioGroup value="ayse">
      <MenubarRadioItem value="ali">Ali</MenubarRadioItem>
      <MenubarRadioItem value="ayse">Ayşe</MenubarRadioItem>
    </MenubarRadioGroup>
    <MenubarSeparator />
    <MenubarItem inset>Profil ekle...</MenubarItem>
  </MenubarContent>
</MenubarMenu>

Bu parçada MenubarRadioGroup ve MenubarRadioItem parçalarını da import listesine eklemeniz gerekir. Demo, seçili değeri sabit value ile verir; kullanıcı seçimini kaydetmek için Dropdown Menu'deki radyo örneğinde olduğu gibi onValueChange ile bir duruma bağlayın. Radyo grubunun altındaki "Profil ekle..." öğesi inset aldığı için radyo öğelerinin metinleriyle aynı hizada başlar. Menubar kökü de bir data-slot="menubar" özniteliği taşıyan, kenarlıklı ve gölgeli bir şerittir; çubuğun yüksekliğini ya da kenarlığını değiştirmek isterseniz bu kökün sınıflarını düzenlersiniz.

Hangisini seçmeli?

Son iki satır sık karıştırılır: menüler eylem içindir, form değeri seçtirmek için Select ve Native Select bileşenlerini kullanın. Sitenin ana gezinmesi için ise Navigation Menu daha uygundur. Context Menu yalnızca sağ tıklamayla açıldığı için, aynı eylemlere başka bir yoldan da ulaşılabilmesi kullanıcılar açısından iyi bir pratiktir; örneğin aynı öğeleri bir Dropdown Menu ile de sunabilirsiniz.

Sık yapılan hatalar

• Shortcut'ın kısayolu çalıştırdığını sanmak: DropdownMenuShortcut, ContextMenuShortcut ve MenubarShortcut yalnızca metin gösteren span öğeleridir; klavye olayını ayrıca dinlemelisiniz.
• Menüden dialog açarken modal ayarını unutmak: Dropdown Menu sayfası bu durum için modal={false} kullanılmasını söyler.
• Onay kutulu öğeyi durumsuz bırakmak: checked sabit verilirse tıklama görünümü değiştirmez; onCheckedChange ile duruma bağlayın.
• Hizasız öğeler: onay ya da radyo öğeleriyle aynı listedeki düz öğelere inset vermezseniz metinler farklı hizalarda başlar.
• Menubar'da MenubarMenu'yü atlamak: her başlık ve listesi ayrı bir MenubarMenu içinde olmalıdır.
• Simgeli tetikleyicide erişilebilir ad vermemek: belgedeki dialog örneğinde yalnızca simge taşıyan düğme aria-label alır; siz de aynısını yapın. Ayrıntı için ARIA rehberine bakın.

Sık Sorulan Sorular

Dropdown Menu ile Context Menu arasındaki fark nedir?

Parçaları ve görünümleri neredeyse aynıdır; belge ikisini de aynı cümleyle tanımlar. Fark tetikleme biçimindedir: Dropdown Menu bir düğmeyle, Context Menu belgedeki örnekte bir alana sağ tıklamayla açılır.

Menü öğesine tıklandığında nasıl işlem yaparım?

Öğenin onSelect olayını kullanın; belgedeki dialog örneği bu olayla durum değiştirir. Öğe yeni bir sayfaya gidecekse asChild ile bir bağlantı bileşenini sarabilirsiniz.

Silme öğesini kırmızı nasıl gösteririm?

Öğeye variant="destructive" verin. Kaynak kod bu varyant için yazı ve odak rengini temadaki destructive değişkeninden alır.

Alt menü içeriğini neden Portal ile sarıyoruz?

Belgedeki Dropdown Menu demosu alt menü içeriğini DropdownMenuPortal ile sarar. Portal, içeriği belge ağacında üst menünün dışına taşır; böylece alt menü üst menünün sınırlarına takılmadan çizilir. Context Menu ve Menubar demolarında alt menü içeriği doğrudan kullanılır.

Radix dışında bir temel kullanılabiliyor mu?

Depo kopyası 19 Aralık 2025 tarihlidir ve bu kopyadaki new-york-v4 bileşenleri Radix paketlerini kullanır. Değişiklik günlüğünün Aralık 2025 bölümü, npx shadcn create ile Radix ya da Base UI arasında seçim yapılabildiğini duyurur; bu seçeneğin ayrıntıları shadcn/ui yenilikleri yazısında ele alınıyor.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: shadcn/ui öğrenme rehberi · Dialog ve Alert Dialog · Command paleti · Select ve Native Select · Navigation Menu, Breadcrumb ve Pagination · Data Table oluşturma