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/menuPlain-CSS theme — no build step
npx astrocraft-ui add overlays/menu --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add overlays/menu --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add overlays/menu --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add overlays/menu --theme tailwind --bridge lumosLive demo
ContextMenu & menu parts
Right-click inside the box. Hold Shift while you do and you get the browser's own menu back instead. Focus the box and press the context-menu key and it opens anchored to the box, not at the corner of the screen. The checkbox and radio items keep the menu open on purpose, and report through a plain change event.
Nothing chosen yet.
Menu parts in a Dropdown
The same parts compose into the Dropdown that shipped in v1. Build such a menu from the new parts OR from plain DropdownItems, not both — the note in_menu.ts explains which controller claims the arrow keys and why the freeze on _popover.ts is worth the constraint.
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 |
|---|---|---|---|---|
| `MenuCheckboxItem.astro` | `menu-checkbox-item` `menu-item-indicator` | — | — | `[aria-checked]` |
| `MenuGroup.astro` | `menu-group` | — | — | — |
| `MenuLabel.astro` | `menu-label` | — | — | — |
| `MenuRadioGroup.astro` | `menu-radio-group` | — | — | — |
| `MenuRadioItem.astro` | `menu-item-indicator` `menu-radio-item` | — | — | `[aria-checked]` |
| `MenuSeparator.astro` | `menu-separator` | `data-orientation`: `horizontal` · `vertical` | — | — |
Source
What the command copies — 7 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<"button"> & { checked?: boolean };
const { checked = false, class: className, ...rest } = Astro.props;
---
<button
type="button"
role="menuitemcheckbox"
aria-checked={checked ? "true" : "false"}
data-slot="menu-checkbox-item"
class={className}
{...rest}
>
<span aria-hidden="true" data-slot="menu-item-indicator"
><slot name="indicator">✓</slot></span
>
<slot />
</button>
<script>
import "../../_menu";
</script>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div"> & { labelledby?: string };
const { labelledby, class: className, ...rest } = Astro.props;
---
<div role="group" aria-labelledby={labelledby} data-slot="menu-group" class={className} {...rest}>
<slot />
</div>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div">;
const { class: className, ...rest } = Astro.props;
---
<div data-slot="menu-label" class={className} {...rest}><slot /></div>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div"> & { labelledby?: string };
const { labelledby, class: className, ...rest } = Astro.props;
---
<div
role="group"
aria-labelledby={labelledby}
data-slot="menu-radio-group"
class={className}
{...rest}
>
<slot />
</div>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"button"> & { checked?: boolean };
const { checked = false, class: className, ...rest } = Astro.props;
---
<button
type="button"
role="menuitemradio"
aria-checked={checked ? "true" : "false"}
data-slot="menu-radio-item"
class={className}
{...rest}
>
<span aria-hidden="true" data-slot="menu-item-indicator"
><slot name="indicator">•</slot></span
>
<slot />
</button>
<script>
import "../../_menu";
</script>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div"> & { orientation?: "horizontal" | "vertical" };
const { orientation = "horizontal", class: className, ...rest } = Astro.props;
---
<div
role="separator"
aria-orientation={orientation}
data-slot="menu-separator"
data-orientation={orientation}
class={className}
{...rest}
>
</div>
import MenuCheckboxItem from "./MenuCheckboxItem.astro";
import MenuGroup from "./MenuGroup.astro";
import MenuLabel from "./MenuLabel.astro";
import MenuRadioGroup from "./MenuRadioGroup.astro";
import MenuRadioItem from "./MenuRadioItem.astro";
import MenuSeparator from "./MenuSeparator.astro";
export { MenuCheckboxItem, MenuGroup, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator };
export default MenuGroup;
What you get
The component source, copied into your project by npx astrocraft-ui add overlays/menu — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.