baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

format project

Browse source
This commit is contained in:
Benjamin Palko 2026-08-11 16:25:07 -04:00
parent 7651afaa0b
commit a6d4064af8
83 changed files with 942 additions and 536 deletions
Download patch file Download diff file Expand all files Collapse all files

86
.opencode/skills/daisyui/components/megamenu.md
View file

@ -1,9 +1,11 @@
### 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](https://daisyui.com/components/megamenu/)
#### Class names
- component: `megamenu`
- part: `megamenu-active`
- modifier: `megamenu-wide`, `megamenu-full`
@ -11,53 +13,69 @@ A megamenu is a large, horizontal menu where each item opens a popover to show a
- size: `megamenu-xs`, `megamenu-sm`, `megamenu-md`, `megamenu-lg`, `megamenu-xl`
#### Syntax
```html
<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>
<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>
<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
```html
<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
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.