Megamenu

Grouped site navigation backed by the native Popover API. The element wraps the public Core CSS contract in Shadow DOM without taking ownership of application state.

Installation

npm install @duskmoon-dev/el-megamenu

Usage

import '@duskmoon-dev/el-megamenu/register';

<el-dm-megamenu trigger-label="Open products menu">
  <span slot="trigger">Products</span>
  <section>
    <h2>Platform</h2>
    <a href="#">Overview</a>
  </section>
  <nav slot="mobile" aria-label="Products"><a href="#">Overview</a></nav>
</el-dm-megamenu>

Live Demo

Products

Platform

Overview

Properties

Property	Type	Default	Description
`trigger-label`	`string`	`'Open menu'`	Accessible trigger label
`full`	`boolean`	`false`	Use the full-width panel variant

Slots

Slot	Description
`trigger`	Trigger label/content
Default	Panel groups and links
`mobile`	Small-screen navigation fallback

CSS Parts

Every structural wrapper is exposed with a matching CSS part name for targeted customization.