Class: Daisy::Navigation::MegamenuComponent

Inherits:
LocoMotion::BaseComponent show all
Defined in:
app/components/daisy/navigation/megamenu_component.rb

Overview

Note:

The hover highlight and popover placement use CSS anchor positioning. Browsers without it still show and open the menus — they just skip the anchored styling.

The Megamenu component renders a large, horizontal navigation menu where each item opens a popover holding a big block of navigation links — a DaisyUI menu, 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: each item is a <button popovertarget> paired with a <div popover>, and DaisyUI positions the popovers (and the sliding hover highlight) with CSS anchor positioning — no JavaScript required.

The megamenu is best suited to large screens. Add max-sm:megamenu-vertical via css: to collapse it on small screens, where the always-rendered toggle button (hidden at sm and up) opens the menu as a full-width popover instead.

Defined Under Namespace

Classes: ItemComponent

Constant Summary

Constants inherited from LocoMotion::BaseComponent

LocoMotion::BaseComponent::EMPTY_PART_IGNORED_TAGS, LocoMotion::BaseComponent::SELF_CLOSING_TAGS

Instance Attribute Summary collapse

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary collapse

Methods inherited from LocoMotion::BaseComponent

build, #component_ref, #config_option, #cssify, define_modifier, define_modifiers, define_part, define_parts, define_size, define_sizes, #empty_part_content, #inspect, #part, register_component_initializer, register_component_setup, #rendered_css, #rendered_data, #rendered_html, #rendered_stimulus_controllers, #rendered_tag_name, renders_many, renders_one, set_component_name, #set_loco_parent, #strip_spaces

Methods included from LocoMotion::Concerns::InspectableComponent

#build_inspect_string

Constructor Details

#initialize(**kws) ⇒ MegamenuComponent

Creates a new Megamenu component.

Parameters:

  • kws (Hash) —

    The keyword arguments for the component.

Options Hash (**kws):

  • id (String) —

    A custom ID for the megamenu container. Also used as the toggle button's popovertarget. Defaults to a generated unique ID.

  • toggle_text (String) —

    The text for the default small-screen toggle button. Defaults to "Menu". For richer content, use the toggle slot instead.

  • toggle (Boolean) —

    Pass false to skip rendering the toggle button entirely. Defaults to true.

  • css (String) —

    Additional CSS classes for styling. Common options include:

    • Responsive: max-sm:megamenu-vertical (collapse on small screens)
    • Layout: megamenu-wide, megamenu-full
    • Size: megamenu-xs, megamenu-sm, megamenu-md, megamenu-lg, megamenu-xl


166
167
168
169
170
171
172
173
 
# File 'app/components/daisy/navigation/megamenu_component.rb', line 166

def initialize(**kws)
  super

  @id = config_option(:id, "megamenu-#{SecureRandom.uuid}")
  @toggle_text = config_option(:toggle_text, "Menu")
  @show_toggle = config_option(:toggle, true)
  @anchored = config_option(:css, "").to_s.match?(/megamenu-(wide|full)/)
end

Instance Attribute Details

#id ⇒ String (readonly)

Returns The megamenu container's ID (used as the toggle button's popovertarget).

Returns:

  • (String) —

    The megamenu container's ID (used as the toggle button's popovertarget).



141
142
143
 
# File 'app/components/daisy/navigation/megamenu_component.rb', line 141

def id
  @id
end

#toggle_text ⇒ String (readonly)

Returns The default text for the toggle button.

Returns:

  • (String) —

    The default text for the toggle button.



203
204
205
 
# File 'app/components/daisy/navigation/megamenu_component.rb', line 203

def toggle_text
  @toggle_text
end

Instance Method Details

#before_render ⇒ Object

Calls the #setup_component method before rendering the component.



208
209
210
211
 
# File 'app/components/daisy/navigation/megamenu_component.rb', line 208

def before_render
  setup_component
  super
end

#popover_anchor ⇒ String?

The per-instance CSS anchor name used by megamenu-wide / megamenu-full popovers, or nil for a default megamenu.

DaisyUI anchors wide/full popovers to a hard-coded --megamenu anchor name, which assumes a single megamenu per page — with several on one page, every wide/full popover resolves to the last one in the document and opens in the wrong place. When those modifiers are present, the component overrides the pair (anchor-name on the container, position-anchor on each item popover) with a unique name so every instance anchors to itself.

Returns:

  • (String, nil) —

    The anchor name (e.g. --megamenu-<id>).



189
190
191
 
# File 'app/components/daisy/navigation/megamenu_component.rb', line 189

def popover_anchor
  @anchored ? "--#{@id}" : nil
end

#show_toggle? ⇒ Boolean

Returns Whether the small-screen toggle button should render.

Returns:

  • (Boolean) —

    Whether the small-screen toggle button should render.



196
197
198
 
# File 'app/components/daisy/navigation/megamenu_component.rb', line 196

def show_toggle?
  @show_toggle
end