Burger Trigger

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:

  • 3dx
  • 3dy
  • arrow
  • arrow-alt
  • arrowturn
  • boring
  • collapse
  • elastic
  • minus
  • slider
  • squeeze
  • vortex
  • none

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 the inherit the correct value for specific element that 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.