Animated Menu Button

An accessible menu button with a morphing icon.

How to

The Animated Menu Button component is used to display a button with a menu icon that animates on click.

It includes two animations:

1. from 'menu' to 'close'
2. from 'menu' to 'arrow' (up/down/right/left)

The menu icon is created in CSS using the .anim-menu-btn__icon element and its ::before and ::after pseudo-elements.

The menu icon can be customized by editing the CSS custom properties listed at the beginning of the CSS file:

:root {
  --anim-menu-btn-size: 2.4em;
  --anim-menu-btn-icon-size: 30px;
  --anim-menu-btn-icon-stroke: 2px;
}

To make sure this component is accessible, don't forget to include a link to the section it toggles. A good example of how to do that is our main-header component (check the .main-header__nav-trigger element).

If you need to track the status change of the menu button (for example, you need to trigger the opening/closing of a navigation element), you can use the custom event anim-menu-btn-clicked that is emetted each time the button is clicked. You can use the detail property of the emitted event to check whether the button has the anim-menu-btn--state-b class (event.detail is true) or not (event.detail is false).

Categories

• Controls

Bug report & feedback

Component Github page ↗