--- title: "Menu" type: component version: "2.1.2" doc_version: "2.3.0" status: stable date: 2026-03-07 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/components/menu --- # Menu Component Menu components display organized lists of actions or navigation options. Built with semantic HTML lists and link elements, the Frutjam menu system supports vertical and horizontal layouts, nested menus, icons, and active states. Fully accessible with keyboard navigation, menus integrate seamlessly with dropdowns, sidebars, and contextual navigation patterns. | Class | Type | Description | | --------------- | -------- | ---------------------------------------------- | | menu | Base | Vertical list of navigation or action items | | menu-item | Modifier | Individual clickable item inside the menu | | menu-title | Modifier | Non-interactive section label | | menu-horizontal | Modifier | Horizontal layout | | menu-vertical | Modifier | Vertical layout (default) | | menu-active | Modifier | Forces the active/highlighted state on an item | | menu-disabled | Modifier | Disabled appearance for a menu item | | menu-xs | Size | Extra small | | menu-sm | Size | Small | | menu-md | Size | Medium (default) | | menu-lg | Size | Large | | menu-xl | Size | Extra large | ## Basic Usage ## Horizontal Menu ```html ``` ## Vertical Menu ```html ``` ## Menu with icon and text ```html ``` ## Responsive Menu: vertical on small screen, horizontal on large screen ```html ``` ## Menu sizes ```html ``` ## Menu with title ```html ``` ## Menu with vertical line with title as a parent ```html ``` ## Menu with disabled items ```html ``` ## Menu with active item ```html ``` ## Menu with submenu ```html ``` ## Menu with collapsible submenu ```html ``` ## Vertical Menu with icon only ```html ``` ## Horizontal Menu with icon only ```html ``` ## Menu with icon only with tooltip ```html ``` ## Menu with icon only (horizontal) with tooltip ```html ``` ## Menu with icons and badge (responsive) ```html ``` ## File tree ```html ``` ## Horizontal submenu ```html ``` ## Mega menu with submenu (responsive) ```html ``` ## Collapsible with submenu (responsive) ```html ```