MegaMenu

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<MegaMenu
  label="Explore"
  sections="[]"
/>

Legacy mount name: data-component="MegaMenu".

Props and attributes

Slots

This component does not declare a slot.

Events

• click

Source contract

Installed source: components/MegaMenu.wrn

component MegaMenu {
  props {
    label = "Explore"
    sections = []
    class = ""
  }
  state open = false
  view {
        <div class="wire-mega-menu {class}">
        <button type="button" class="wire-mega-menu__trigger" aria-expanded="{open}" @click="open = !open">{label}<span aria-hidden="true">⌄</span>
        </button>
        <div data-show="open" class="wire-mega-menu__panel">{#each sections as section}<section>
        <h3>{section.title}</h3>
        <ul>{#each section.items as item}<li>
        <a href="{item.href}">{item.label}</a>
        </li>{/each}</ul>
        </section>{/each}</div>
        </div>
    }
}