Animated Menu Button
An accessible menu button with a morphing icon.
All components are built upon the CodyHouse Framework.
This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.
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).
Bug Report & Feedback
Get in touch: suggest a component or report a bug.