Animated Menu Button
An accessible menu button with a morphing icon.
All components are based on CodyFrame.
This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.
The Animated Menu Button component is used to display a button with a menu icon that animates on click.
It includes two animations:
- from 'menu' to 'close'
- from 'menu' to 'arrow' (up/down/right/left)
The menu icon is created in CSS using the
.anim-menu-btn__icon element and its
The menu icon can be customized by editing the CSS custom properties listed at the beginning of the CSS file:
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
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).