A panel that drops.

The markup.

The component wires the pair, the trigger is the button, the panel holds whatever you put in it. Ids and ARIA are written on connect. Everything you can see below is this page's own CSS.

<dropdown-component>
  <dropdown-trigger>Account</dropdown-trigger>
  <dropdown-panel>
    <a href="/profile">Profile</a>
    <a href="/billing">Billing</a>
  </dropdown-panel>
</dropdown-component>

// ids, aria-controls, aria-expanded, aria-hidden, aria-labelledby
// and inert are all written for you on connect
import '@magic-spells/dropdown-panel';
import '@magic-spells/dropdown-panel/css';

One attribute holds the state.

visible on the host is the truth, and it reflects. aria-expanded, aria-hidden and inert are derived output — never write them yourself.

const menu = document.querySelector('#account-menu');

menu.visible = true;              // adds the attribute
menu.setAttribute('visible', '');  // identical
menu.toggle();

// hide() restores focus only if focus is inside the panel,
// so closing a menu you never entered never steals it back
menu.hide({ restoreFocus: false });

/* style the open state off the host, not off the ARIA */
dropdown-component[visible] > dropdown-trigger {
  color: #d8b043;
}

Opening on hover.

Hover runs on pointerenter and ignores pointerType: touch — no more double-tap on iOS. Touch dismisses on an outside pointerdown instead, and a clicked-open panel latches rather than closing on leave.

// hover, but never from a synthetic touch pointer
host.addEventListener('pointerenter', (e) => {
  if (e.pointerType !== 'touch') host.show();
});

// registered on open, removed on close — one listener, never two
document.addEventListener('pointerdown', (e) => {
  if (!host.contains(e.target)) host.hide();
});

Choosing the interaction.

both is the default: hover on a fine pointer, click everywhere. hover drops the click toggle only where (hover: hover) matches; click drops the hover path entirely. open-delay and close-delay add hover intent, in milliseconds — click, keys and the API never wait.

<dropdown-component>                     <!-- both, the default -->
<dropdown-component trigger="hover">    <!-- fine pointers only -->
<dropdown-component trigger="click">    <!-- press to toggle -->

<dropdown-component trigger="hover" open-delay="150" close-delay="300">

The invisible bridge.

A 30px ::before on the trigger, skewed into a wedge, covers the diagonal trip from trigger to panel. It exists only while hovered, inside @media (hover: hover) — one left standing after an iOS tap would sit over the next nav item.

/* dropdown-panel.css — the whole of it */
@media (hover: hover) {
  dropdown-component:hover > dropdown-trigger::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    width: calc(100% + 40px);
    height: 30px;
    transform-origin: top center;
    transform: perspective(50px) rotateX(50deg);
    z-index: 10;
  }

  /* a right-opening panel gets the same wedge, rotated onto Y */
  dropdown-component:has(> dropdown-panel[opens='right']):hover
    > dropdown-trigger::before {
    left: calc(100% - 30px);
    top: -10px;
    width: 40px;
    height: calc(100% + 20px);
    transform: perspective(50px) rotateY(-50deg);
  }
}

/* a decorative ::after on the trigger replaces the bridge outright,
   so put the arrow in a real element and mirror it — scaleY(-1)
   flips through the centre line and reverses identically on close,
   where a rotation would unwind a spin */
.menu-arrow {
  transform-origin: center;
  transition: transform var(--dp-effect-duration, 200ms);
}

dropdown-component[visible] > dropdown-trigger > .menu-arrow {
  transform: scaleY(-1);
}

The full-width mega menu.

wide makes the panel width: 100% and the host position: static, so it measures against the nearest positioned ancestor. Give your nav bar position: relative and the mega menu spans it. Two CSS rules, no script.

<nav class="menubar">                /* position: relative */
  <dropdown-component>
    <dropdown-trigger>Products</dropdown-trigger>
    <dropdown-panel wide>…</dropdown-panel>
  </dropdown-component>
</nav>

/* dropdown-panel.css */
dropdown-component:has(> dropdown-panel[wide]) { position: static; }
dropdown-panel[wide] { width: 100%; }

/* your stylesheet does the layout */
dropdown-panel[wide] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

Menus inside menus.

A dropdown inside a panel is just another dropdown. opens="right" moves it to top: 0; left: 100% and rotates the bridge onto Y. Nothing in the chain may set overflow: hidden — that clips the submenu at the parent's edge.

<dropdown-panel>
  <a href="/docs">Documentation</a>

  <dropdown-component>                    <!-- nested -->
    <dropdown-trigger>Support</dropdown-trigger>
    <dropdown-panel opens="right">…</dropdown-panel>
  </dropdown-component>
</dropdown-panel>

/* the child combinator is what keeps the levels apart */
dropdown-component:hover > dropdown-panel   /* ✓ */
dropdown-component:hover   dropdown-panel   /* ✗ opens every level */

/* and never do this to a panel or anything above one */
dropdown-panel { overflow: hidden; }             /* ✗ clips submenus */

Entrance effects.

The core stylesheet fades and nothing else. Import the opt-in file and effect="…" gives you six presets plus the trigger arrow, tuned by --dp-effect-duration and --dp-effect-easing, all collapsing to a fade under reduced motion.

import '@magic-spells/dropdown-panel/css';
import '@magic-spells/dropdown-panel/css/effects';  // opt in

<dropdown-panel effect="blur">…</dropdown-panel>

<!-- empty hook: the sheet draws and animates the glyph -->
<dropdown-component arrow-shape="triangle">
  <dropdown-trigger>Menu<span data-dropdown-arrow aria-hidden="true"></span></dropdown-trigger>

/* never a ::before on the trigger — that box is the hover bridge.
   on the hook element they are fine; that is what the sheet uses */

/* they inherit, so one rule reaches the panel and the arrow */
dropdown-component {
  --dp-effect-duration: 200ms;
  --dp-effect-easing: cubic-bezier(0.32, 0.72, 0, 1);
  --dp-arrow-size: 0.64em;
  --dp-arrow-thickness: 1.5px;
}

Keyboard and focus.

The panel carries inert while closed — correct on the first paint, not just after a toggle. ↓ and ↑ open on the first or last item and wrap; → and ← step through submenus. Tab out deliberately does not close: you have to be able to tab in.

// no role="menu", no role="menuitem" — this is site navigation,
// not an application menu, and the roles promise interactions
// screen-reader users would then be right to expect

dropdown-trigger   role="button" tabindex="0" aria-haspopup="true"
                   aria-expanded="false" aria-controls="…"
dropdown-panel     role="group" aria-hidden="true" inert
                   aria-labelledby="…"

// only the innermost open dropdown answers a key, which is what
// keeps a nested menu from taking its parents down with it
if (host.querySelector('dropdown-component[visible]')) return;

The application menu, opted into.

Site navigation stays a disclosure. Add menu and the same markup becomes an APG menu button: role="menu", roving tabindex, typeahead, Tab closes, and every activation fires dropdown-panel:select and closes the whole chain.

<dropdown-component menu>
  <dropdown-trigger>Edit</dropdown-trigger>
  <dropdown-panel>                // role="menu"
    <button data-value="save">Save</button>
    <div role="separator"></div>
    <span aria-disabled="true">Publish</span>
  </dropdown-panel>
</dropdown-component>

menu.addEventListener('dropdown-panel:select', (e) => {
  e.detail.item;   // the activated element
  e.detail.value;  // data-value > value > href > null
  // e.preventDefault() keeps the whole chain open
});

Right-click, anywhere in here.

trigger="contextmenu" needs no <dropdown-trigger> at all — the component is the surface. The panel goes position: fixed at the pointer, flips and clamps to an 8 px margin, dismisses on scroll, and returns focus to wherever it came from. On touch, a 500 ms press does the same.

Which way it opens.

align="start|end" on the panel is pure CSS — the right-hand menu edges to the right of its trigger. flip is opt-in JavaScript, measured once per open: near the bottom of the viewport the panel opens upward instead, and reverts as soon as there is room again. Scroll this section to the fold and reopen it.

Styling it yourself.

There is no theming API, because there is nothing to override. The package sets position, opacity and pointer-events, and stops. Every control below writes a property this page invented — only duration and easing belong to the component.

/* the component's entire stylesheet contribution */
dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  /* longhands, so overriding one does not reset the rest */
  transition-property: opacity;
  transition-duration: 200ms;
}

/* and yours does the rest */
dropdown-panel {
  background: #171b26;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  /* never overflow: hidden */
}

Lifecycle events.

Four bubbling events on the host, each carrying { trigger, panel }. The two before- ones are cancelable — preventDefault() and nothing happens. Flip the switch to refuse.

No events yet.

const menu = document.querySelector('dropdown-component');

for (const name of ['before-show', 'show', 'before-hide', 'hide']) {
  menu.addEventListener(`dropdown-panel:${name}`, (event) => {
    console.log(name, event.detail.trigger, event.detail.panel);
  });
}

// cancelable — this menu refuses to open
menu.addEventListener('dropdown-panel:before-show', (e) => e.preventDefault());

// they bubble, so one listener on the nav hears every menu in it
nav.addEventListener('dropdown-panel:show', (e) => track(e.detail.trigger));

The full reference.

Three elements, seven attributes, three methods, four events.

import '@magic-spells/dropdown-panel';
import '@magic-spells/dropdown-panel/css';
import '@magic-spells/dropdown-panel/css/effects';  // optional

const menu = document.querySelector('dropdown-component');
menu.show();
menu.hide();
menu.toggle();
menu.visible;  // true | false, reflects the attribute

Elements

Attributes

CSS Custom Properties

That is the whole list. Colours, shadows, radii and z-index are yours — dropdown-panel { … } matches like any other tag. Never overflow: hidden on a panel or above one.

Methods & Properties

Events

All four fire on the host and bubble — one listener on the nav hears every menu. You do not need them to keep a single menu open; the component already does that.

Accessibility

A disclosure pattern, not a menu one — no role="menu" or menuitem anywhere, because those promise a keyboard model site navigation rarely delivers. Write your items as real links or buttons and the rest follows.

Browser support

Chrome 105+, Edge 105+, Safari 15.4+, Firefox 121+ — custom elements, Pointer Events, inert, :has(). :has() is load-bearing: it switches the host between relative and static for wide.