Component reference
MenuButton
A button that opens the existing Menu below it, including nested items.
Preview
Button and menu
A button that opens the existing Menu below it. Arrow keys still enter the menu; nested items stay with Menu.
render: () => {
const feedback = signal("No format selected yet.");
return (
<Stack align="start">
<MenuButton
id="export-menu"
variant="outline"
items={[
{
id: "markdown",
label: "Markdown",
icon: <Icon name="file-text" />,
onSelect: () => {
feedback.value = "Selected Markdown.";
},
},
{
id: "more",
label: "More formats",
children: [
{
id: "text",
label: "Plain text",
onSelect: () => {
feedback.value = "Selected Plain text.";
},
},
],
},
]}
>
Export
</MenuButton>
<Note role="status">{feedback}</Note>
</Stack>
);
}Installation
bun add meowtail
Usage
import { MenuButton } from "meowtail";API reference
Props
| Prop | Type | Default |
|---|---|---|
idRequired | string | – |
itemsRequired | readonly MenuEntry[] | – |
open | MaybeSignal<boolean> | – |
onOpenChange | (open: boolean) => void | – |
align | "start" | "end" | – |
children | Child | – |
Also takes className, children and the attributes and events of its root element. It also extends "id" | "onClick">.
DOM parts
This component has no registry contract.
Registry
This component has no registry contract. It is a story that shows several components together.