--- 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/id/components/menu --- # Menu Component Komponen menu menampilkan daftar tindakan atau opsi navigasi yang terorganisir. Dibangun dengan daftar HTML semantik dan elemen tautan, sistem menu Frutjam mendukung tata letak vertikal dan horizontal, menu bersarang, ikon, dan status aktif. Dapat diakses sepenuhnya dengan navigasi keyboard, menu terintegrasi secara mulus dengan dropdown, sidebar, dan pola navigasi kontekstual. Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun. | Kelas | Jenis | Keterangan | | --------------- | -------- | ----------------------------------------------- | | menu | Basis | Daftar vertikal item navigasi atau tindakan | | menu-item | Pengubah | Item individual yang dapat diklik di dalam menu | | menu-title | Pengubah | Label bagian non-interaktif | | menu-horizontal | Pengubah | Tata letak horizontal | | menu-vertical | Pengubah | Tata letak vertikal (default) | | menu-active | Pengubah | Memaksa status aktif/disorot pada suatu item | | menu-disabled | Pengubah | Menonaktifkan tampilan item menu | | menu-xs | Ukuran | Sangat kecil | | menu-sm | Ukuran | Kecil | | menu-md | Ukuran | Sedang (standar) | | menu-lg | Ukuran | Besar | | menu-xl | Ukuran | Ekstra besar | ## Penggunaan Dasar ## Menu Horisontal ```html ``` ## Menu Vertikal ```html ``` ## Menu dengan ikon dan teks ```html ``` ## Menu Responsif: vertikal di layar kecil, horizontal di layar besar ```html ``` ## Ukuran menu ```html ``` ## Menu dengan judul ```html ``` ## Menu dengan garis vertikal dengan judul sebagai induk ```html ``` ## Menu dengan item yang dinonaktifkan ```html ``` ## Menu dengan item aktif ```html ``` ## Menu dengan submenu ```html ``` ## Menu dengan submenu yang dapat dilipat ```html ``` ## Menu Vertikal dengan ikon saja ```html ``` ## Menu Horizontal dengan ikon saja ```html ``` ## Menu dengan ikon hanya dengan tooltip ```html ``` ## Menu dengan ikon saja (horizontal) dengan tooltip ```html ``` ## Menu dengan ikon dan lencana (responsif) ```html ``` ## Pohon berkas ```html ``` ## Submenu horisontal ```html ``` ## Menu mega dengan submenu (responsif) ```html ``` ## Dapat dilipat dengan submenu (responsif) ```html ```