Hamburger

<zeno-hamburger>NavigationSource

The three-line button that opens and closes a menu.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Toggle

A press switches active and fires toggle with the new state.

The menu is closed.

<zeno-hamburger></zeno-hamburger>
<p data-result>The menu is closed.</p>

document.querySelector('zeno-hamburger').addEventListener('toggle', event => {
  document.querySelector('[data-result]').textContent =
    event.detail.active ? 'The menu is open.' : 'The menu is closed.';
});

Variants

Each variant moves from three bars to a cross in a different way. Press one to see it.

<zeno-hamburger variant="basic"></zeno-hamburger>
<zeno-hamburger variant="spin"></zeno-hamburger>
<zeno-hamburger variant="squeeze"></zeno-hamburger>
<zeno-hamburger variant="vortex"></zeno-hamburger>
<zeno-hamburger variant="elastic"></zeno-hamburger>

Sizes

<zeno-hamburger size="sm"></zeno-hamburger>
<zeno-hamburger size="md"></zeno-hamburger>
<zeno-hamburger size="lg"></zeno-hamburger>

Active and disabled

A disabled button does not toggle.

<zeno-hamburger active></zeno-hamburger>
<zeno-hamburger disabled></zeno-hamburger>

Attributes and properties

Property	Attribute	Type	Default	Description
active	activereflects	boolean	false
variant	variantreflects	'basic' | 'spin' | 'squeeze' | 'vortex' | 'elastic'	'basic'
size	sizereflects	'sm' | 'md' | 'lg'	'md'
disabled	disabledreflects	boolean	false
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
toggle(): void	Toggle active state
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

Event	Detail	Description
toggle	{ active: boolean }	The button was toggled.

Slots

This element has no slots.

CSS parts

Part
base
box

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Accessibility

Keyboard

Key	What it does
Tab	Moves focus to the button.
EnterSpace	Switches active and fires toggle.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• Renders a native <button> in its shadow root.
• The button is named “Open menu”, or “Close menu” while active. An aria-label on the element replaces both names.
• The state is exposed with aria-pressed.
• With reduced motion the bars change without a transition.
• The button is hidden when the page is printed.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has no Storybook story.

6 of the 11 properties, methods, events, slots and parts above have no description in the source

• the property active
• the property variant
• the property size
• the property disabled
• the part base
• the part box

Known gaps:

• The button does not set aria-expanded or aria-controls, and there is no way to set them on the inner button. Assistive technology is not told that the button opens a menu or which one.
• With the default names the state is given twice: the name changes from “Open menu” to “Close menu” and aria-pressed changes as well. A screen reader can announce “Close menu, pressed”.
• “Open menu” and “Close menu” are English only. The only way to translate them is one aria-label for both states.
• The aria-label is read when the button renders. Changing only aria-label later does not update the button until active or another property changes.