Mega Menu
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
Install
Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).
Unstyled — behavior only, you write the CSS
npx astrocraft-ui add overlays/mega-menuPlain-CSS theme — no build step
npx astrocraft-ui add overlays/mega-menu --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add overlays/mega-menu --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add overlays/mega-menu --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add overlays/mega-menu --theme tailwind --bridge lumosLive demo
MegaMenu
Click-to-open, top-layer panel with native light-dismiss + Escape. The trigger reuses the NavLink look, so it drops into a Nav between plain links.
Attribute surface
With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `MegaMenu.astro` | `mega-menu` | — | — | — |
| `MegaMenuItem.astro` | `mega-menu-item` `mega-menu-item-body` `mega-menu-item-description` `mega-menu-item-icon` `mega-menu-item-title` | — | — | — |
| `MegaMenuPanel.astro` | `mega-menu-panel` | `data-align`: `start` · `end` `data-columns`: `1` · `2` · `3` | — | `:popover-open` |
| `MegaMenuTrigger.astro` | `chevron` `mega-menu-trigger` | `data-variant`: `underline` · `pills` · `segment` | — | `[aria-expanded]` |
Source
What the command copies — 5 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div">;
const { class: className, ...rest } = Astro.props;
---
<div class={className} data-slot="mega-menu" {...rest}>
<slot />
</div>
<script>
import "../../_popover";
</script>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"a"> & { href: string };
const { href, class: className, ...rest } = Astro.props;
---
<a href={href} data-slot="mega-menu-item" class={className} {...rest}>
{
Astro.slots.has("icon") && (
<span data-slot="mega-menu-item-icon" aria-hidden="true">
<slot name="icon" />
</span>
)
}
<span data-slot="mega-menu-item-body">
<span data-slot="mega-menu-item-title"><slot /></span>
{
Astro.slots.has("description") && (
<span data-slot="mega-menu-item-description">
<slot name="description" />
</span>
)
}
</span>
</a>
---
import "../../../../styles/structure.css";
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div"> & {
id: string;
align?: "start" | "end";
columns?: 1 | 2 | 3;
};
const { columns = 3, align = "start", class: className, ...rest } = Astro.props;
---
<div
popover="auto"
data-slot="mega-menu-panel"
data-align={align}
data-columns={columns}
class={className}
{...rest}
>
<slot />
</div>
---
import type { HTMLAttributes } from "astro/types";
import Chevron from "../../_Chevron.astro";
type Props = HTMLAttributes<"button"> & {
for: string;
variant?: "underline" | "pills" | "segment";
};
const { for: target, variant = "underline", class: className, ...rest } = Astro.props;
---
<button
type="button"
popovertarget={target}
aria-expanded="false"
data-slot="mega-menu-trigger"
data-variant={variant}
class={className}
{...rest}
>
<slot />
<slot name="chevron"><Chevron /></slot>
</button>
import MegaMenu from "./MegaMenu.astro";
import MegaMenuItem from "./MegaMenuItem.astro";
import MegaMenuPanel from "./MegaMenuPanel.astro";
import MegaMenuTrigger from "./MegaMenuTrigger.astro";
export { MegaMenu, MegaMenuItem, MegaMenuPanel, MegaMenuTrigger };
export default MegaMenu;
What you get
The component source, copied into your project by npx astrocraft-ui add overlays/mega-menu — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.