A megamenu is a large, horizontal menu where each item opens a popover holding a big block of navigation links — DaisyUI menus, multi-column lists, images, or any custom content. It is intended to be used once, near the top of the page.
Everything is native HTML (popover / popovertarget) positioned with
CSS anchor positioning, so there is no JavaScript involved. On small
screens, add max-sm:megamenu-vertical to collapse the menu behind the
built-in toggle button, which opens it as a full-width popover.
Each item takes a title: for its always-visible button and a block
for its popover — here, simple vertical menus. Hover the buttons to see
the sliding highlight; click to open. Resize the window below sm to
see the vertical layout behind the toggle.
= daisy_megamenu(css: "max-sm:megamenu-vertical p-2 border border-base-300 rounded-box") do |mega|
- mega.with_item(title: "Services") do
= daisy_menu do |menu|
- menu.with_item do
= link_to "Enterprise", "#"
- menu.with_item do
= link_to "CRM Software", "#"
- menu.with_item do
= link_to "Security", "#"
- mega.with_item(title: "AI") do
= daisy_menu do |menu|
- menu.with_item do
= link_to "AI Infrastructure", "#"
- menu.with_item do
= link_to "Image Generation", "#"
- mega.with_item(title: "Cloud") do
= daisy_menu do |menu|
- menu.with_item do
= link_to "Cloud Computing", "#"
- menu.with_item do
= link_to "Storage Solutions", "#"
With megamenu-wide, every popover stretches to the width of the
megamenu container — a good fit for horizontal menus.
= daisy_megamenu(css: "megamenu-wide max-sm:megamenu-vertical p-2 border border-base-300 rounded-box") do |mega|
- mega.with_item(title: "Products") do
= daisy_menu(css: "menu-horizontal") do |menu|
- menu.with_item do
= link_to "UI Kit", "#"
- menu.with_item do
= link_to "Themes", "#"
- menu.with_item do
= link_to "Plugins", "#"
- mega.with_item(title: "Resources") do
= daisy_menu(css: "menu-horizontal") do |menu|
- menu.with_item do
= link_to "Documentation", "#"
- menu.with_item do
= link_to "Blog", "#"
megamenu-full stretches every popover across the entire page width,
regardless of the menu's own size.
= daisy_megamenu(css: "megamenu-full max-sm:megamenu-vertical p-2 border border-base-300 rounded-box") do |mega|
- mega.with_item(title: "Platform") do
= daisy_menu(css: "menu-horizontal") do |menu|
- menu.with_item do
= link_to "Hosting", "#"
- menu.with_item do
= link_to "Databases", "#"
- menu.with_item do
= link_to "Edge Network", "#"
Popovers hold any markup — mix menus with headings, badges, buttons, and anything else. The popover sizes itself to its content, so multi-column layouts just work.
= daisy_megamenu(css: "max-sm:megamenu-vertical p-2 border border-base-300 rounded-box") do |mega|
- mega.with_item(title: "Solutions") do
.flex.flex-col.sm:flex-row.gap-6.p-4
%div
%h3.font-bold.px-3.pb-2 By Team
= daisy_menu do |menu|
- menu.with_item do
= link_to "#", class: "flex items-center gap-2" do
Engineering
= daisy_badge(title: "New", css: "badge-primary badge-sm")
- menu.with_item do
= link_to "Design", "#"
- menu.with_item do
= link_to "Marketing", "#"
%div
%h3.font-bold.px-3.pb-2 By Size
= daisy_menu do |menu|
- menu.with_item do
= link_to "Startups", "#"
- menu.with_item do
= link_to "#", class: "flex items-center gap-2" do
Enterprise
= daisy_badge(title: "SSO", css: "badge-outline badge-sm")
.rounded-box.bg-base-200.p-4.flex.flex-col.gap-2.min-w-52
%div
= daisy_badge(title: "Spotlight", css: "badge-secondary")
%p.font-bold LocoMotion Cloud
%p.text-sm.opacity-70 Spin up a demo app in one click.
= daisy_button(title: "Book a demo", css: "btn-primary btn-sm mt-2")
- mega.with_item(title: "Pricing") do
= daisy_menu do |menu|
- menu.with_item do
= link_to "Plans", "#"
- menu.with_item do
= link_to "Compare", "#"
- menu.with_item do
.flex.items-center.gap-2.px-3.py-2
= daisy_status(css: "status-success animate-pulse")
%span.text-sm All systems operational
The small-screen toggle shows the toggle_text: option ("Menu" by
default) — or provide the toggle slot for custom content. Pass
toggle: false to skip it entirely (this example keeps it, with an
icon). Shrink the window to see it.
= daisy_megamenu(css: "max-sm:megamenu-vertical p-2 border border-base-300 rounded-box") do |mega|
- mega.with_toggle do
.flex.items-center.gap-2
= loco_icon("bars-3", css: "size-5")
Navigation
- mega.with_item(title: "Home") do
= daisy_menu do |menu|
- menu.with_item do
= link_to "Dashboard", "#"
- mega.with_item(title: "About") do
= daisy_menu do |menu|
- menu.with_item do
= link_to "Our Team", "#"
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.