benjaminpalko/.opencode/skills/daisyui/components/menu.md

menu

Menu is used to display a list of links vertically or horizontally

menu docs

Class names

• component: menu
• part: menu-title, menu-dropdown, menu-dropdown-toggle
• modifier: menu-disabled, menu-active, menu-focus, menu-dropdown-show, menu-paged
• size: menu-xs, menu-sm, menu-md, menu-lg, menu-xl
• direction: menu-vertical, menu-horizontal

Syntax

Vertical menu:

<ul class="menu">
	<li><button>Item</button></li>
</ul>

Horizontal menu:

<ul class="menu menu-horizontal">
	<li><button>Item</button></li>
</ul>

Rules

• {MODIFIER} is optional and can have one of the modifier/size/direction class names
• Use lg:menu-horizontal for responsive layouts
• Use menu-title for list item title
• Use <details> tag to make submenus collapsible
• Use menu-paged to show one submenu level at a time; the open <summary> becomes the back button
• Use menu-dropdown and menu-dropdown-toggle to toggle the dropdown using JS