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} p-2 border border-base-300" 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 w-full p-2 border border-base-300" id="my-megamenu-2" popover>
  <span class="megamenu-active"></span>
  <button popovertarget="c1">One</button>
  <div id="c1" popover>
    <div class="flex max-sm:flex-col items-start">
      <ul class="menu w-full md:menu-horizontal">
        <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="md:max-w-sm max-md:w-auto" 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