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

megamenu

A megamenu is a large, horizontal menu where each item opens a popover to show a large block of navigation links. Megamenu must be used once, on top of the page. Inside each popover, you can use a daisyUI menu, or any custom content. Megamenu fits better on large screens only, and for small screens, you can hide the megamenu and show the content in a dropdown or a drawer.

megamenu docs

Class names

• component: megamenu
• part: megamenu-active
• modifier: megamenu-wide, megamenu-full
• direction: megamenu-vertical
• size: megamenu-xs, megamenu-sm, megamenu-md, megamenu-lg, megamenu-xl

Syntax

<button class="btn sm:hidden" popovertarget="my-megamenu-1">Menu</button>
<div
	class="megamenu max-sm:megamenu-vertical {MODIFIER} border-base-300 border p-2"
	id="my-megamenu-1"
	popover
>
	<span class="megamenu-active"></span>

	<button popovertarget="item-1">button 1</button>
	<div id="item-1" popover>{CONTENT}</div>

	<button popovertarget="item-2">button 2</button>
	<div id="item-2" popover>{CONTENT}</div>
</div>

Example of megamenu-wide with lots of menu items

<button class="btn sm:hidden" popovertarget="my-megamenu-2">Menu</button>
<div
	class="megamenu max-sm:megamenu-vertical megamenu-wide border-base-300 w-full border p-2"
	id="my-megamenu-2"
	popover
>
	<span class="megamenu-active"></span>
	<button popovertarget="c1">One</button>
	<div id="c1" popover>
		<div class="flex items-start max-sm:flex-col">
			<ul class="menu md:menu-horizontal w-full">
				<li>
					<a>first column menu item</a>
					<ul>
						<li><a>sub menu item</a></li>
					</ul>
				</li>
				<li>
					<a>second column menu item</a>
					<ul>
						<li><a>sub menu item</a></li>
					</ul>
				</li>
				<li>
					<a>third column menu item</a>
					<ul>
						<li><a>sub menu item</a></li>
					</ul>
				</li>
			</ul>
			<img
				src="{image-url}"
				class="max-md:w-auto md:max-w-sm"
				alt="sample image at the end of the megamenu"
			/>
		</div>
	</div>
</div>

Rules

• {MODIFIER} is optional and can have one of the modifier class names and one of the size class names
• megamenu-active span is mandatory. it's the indicator that moves under the active item
• Each button must have a corresponding popover with the same id as the popovertarget value. HTML IDs must be unique.
• {CONTENT} can include a daisyUI menu (<ul class="menu"><li><a>List item 1</a></li></ul>), or any custom content
• you can put horizontal menu inside the popover like <ul class="menu menu-horizontal"><li><a>List item 1</a></li></ul>, or any other variation of daisyUI menu component
• On small screens the whole megamenu is hidden using max-sm:megamenu-vertical class and it will be vertical when visible. The button with popovertarget="my-megamenu-1" opens the megamenu with id="my-megamenu-1" popover
• On large screens, we hide the button using sm:hidden and the megamenu will be a horizontal menu, and each button inside the megamenu will open its corresponding popover.
• megamenu can have max 10 popovers inside it
• to hide the arrow from the buttons, use after:content-none class on the buttons