MenuButton

Animated hamburger menu button that toggles between a three-line "burger" icon and an X (close) icon with a smooth CSS transition. Supports controlled and uncontrolled state.

Also known as: hamburger button, burger menu, nav toggle

View in Storybook

When to use

• Toggling mobile or sidebar navigation menus.
• Any context where a compact open/close trigger is needed.

Import

import { MenuButton } from '@vacano/ui'

Usage

<MenuButton />

Controlled

const [open, setOpen] = useState(false)

<MenuButton open={open} onOpenChange={setOpen} />

Sizes

<MenuButton size="compact" />
<MenuButton size="default" />

Disabled

<MenuButton disabled />

Props

Prop	Type	Default	Description
open	boolean	-	Controlled open state. When provided, component becomes controlled.
defaultOpen	boolean	false	Initial open state for uncontrolled usage
onOpenChange	(open: boolean) => void	-	Callback fired when the open state changes
size	'compact' | 'default'	'default'	Button size
disabled	boolean	false	Disables the button and prevents interaction
className	string	-	CSS class name for the root button element
classnames	MenuButtonClassNames	-	Custom class names for sub-elements
ref	Ref<HTMLButtonElement>	-	Ref forwarded to the root button element
data-test-id	string	-	Test identifier attribute

The component also accepts all standard HTMLButtonElement attributes (except children and className which are overridden/excluded by the component).

MenuButtonClassNames

Key	Description
line	Each of the three animated lines

Related

• Button - Standard action button
• Dropdown - Menu with trigger