--- title: "Menu" type: component version: "2.2.2" doc_version: "2.7.3" status: stable date: 2026-07-05 library: Frutjam stack: tailwind_css compatibility: universal framework_agnostic: true runtime_requirement: none description: "Tailwind CSS Menu for navigation lists, sidebars, and dropdowns. Icons, active states, and nested submenus—fully accessible without JavaScript." url: https://frutjam.com/tr/components/menu --- # Menu Component Menü bileşenleri, eylemlerin veya gezinme seçeneklerinin düzenli listelerini görüntüler. Anlamsal HTML listeleri ve bağlantı öğeleriyle oluşturulan Frutjam menü sistemi, dikey ve yatay düzenleri, iç içe menüleri, simgeleri ve etkin durumları destekler. Klavyeyle gezinmeyle tamamen erişilebilen menüler, açılır menüler, kenar çubukları ve bağlamsal gezinme modelleriyle sorunsuz bir şekilde bütünleşir. Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır. | Sınıf | Tip | Tanım | | --------------- | ----------- | ------------------------------------------------- | | menu | Temel | Gezinme veya eylem öğelerinin dikey listesi | | menu-item | Değiştirici | Menü içindeki tek tek tıklanabilir öğe | | menu-title | Değiştirici | Etkileşimli olmayan bölüm etiketi | | menu-horizontal | Değiştirici | Yatay düzen | | menu-vertical | Değiştirici | Dikey düzen (varsayılan) | | menu-active | Değiştirici | Bir öğenin etkin/vurgulanmış durumunu zorlar | | menu-disabled | Değiştirici | Bir menü öğesi için devre dışı bırakılmış görünüm | | menu-xs | Boyut | Ekstra küçük | | menu-sm | Boyut | Küçük | | menu-md | Boyut | Orta (varsayılan) | | menu-lg | Boyut | Büyük | | menu-xl | Boyut | Ekstra büyük | ## Temel Kullanım ## Yatay Menü ```html ``` ## Dikey Menü ```html ``` ## Simge ve metin içeren menü ```html ``` ## Duyarlı Menü: küçük ekranda dikey, büyük ekranda yatay ```html ``` ## Menü boyutları ```html ``` ## Başlıklı menü ```html ``` ## Ebeveyn olarak başlığın yer aldığı dikey çizgili menü ```html ``` ## Devre dışı bırakılan öğeleri içeren menü ```html ``` ## Etkin öğeli menü ```html ``` ## Alt menülü menü ```html ``` ## Katlanabilir alt menüye sahip menü ```html ``` ## Yalnızca simge içeren Dikey Menü ```html ``` ## Yalnızca simge içeren Yatay Menü ```html ``` ## Yalnızca ipucu içeren simgeli menü ```html ``` ## Araç ipucu içeren yalnızca simgeli menü (yatay) ```html ``` ## Simgeler ve rozet içeren menü (duyarlı) ```html ``` ## Dosya ağacı ```html ``` ## Yatay alt menü ```html ``` ## Alt menülü mega menü (duyarlı) ```html ``` ## Alt menüyle katlanabilir (duyarlı) ```html ```