This element is for adding animation burger toggle buttons to your site. These can be used as a trigger to open and close OffCanvas’, mobile slide menus or modals on your site. Ideal for building custom OffCanvas menus, or triggering content that pops up on click.
Animation options: A live demo of these animation options can be seen here.
Multiple Use Cases
The burger trigger, of course, can be used as a regular button if you were building something custom where you just needed a button with a nice animation, however when used with BricksExtras components there’s some ‘done-for-you’ functionality built-in..
Notably.. when used with the OffCanvas or modal elements, the burger button will ‘know’ to automatically toggle itself back to closed after they are dismissed.
Also, for convenience, the ‘aria-label’, the ‘aria-expanded’ attributes are auto-populated, and if used with the Offcanvas or Modal, the ‘aria-controls’ will inherit the correct value for the specific element that the button is controlling.
Hiding the Burger on Desktop
It’s common to hide the burger trigger for desktop view if using for a mobile menu. Use display none in the layout settings in the style tab. Use display flex to make it visible on the smaller screen size where you want it to appear.
Some notes on the built-in accessibility..
- Element is a <button> element, can be focused and pressed via keyboard (return or space key)
- The default aria-label value for screen readers is “open menu”. This can be customised from the settings.
- The button will change aria-expanded to true when toggled open.
- If using to trigger the Modal or OffCanvas, the button will automatically close when the modal or Offcanvas close, even if another method was used for closing, keeping them always in sync.
- As the element is a button at the root level, you can add any attributes using Bricks’ custom attributes settings for your specific use case.