Burger Trigger

This component is for adding animated burger toggle buttons to your site. These can be used as a trigger to open and close Modals, Off Canvas or Slide Menus.


Every Burger Trigger component has a class of oxy-burger-trigger. Therefore, if you would like to trigger a Modal component by clicking the hamburger menu, you could set the Trigger selector to .oxy-burger-trigger.

You do not need to set this explicitly if you are using the Burger Trigger to trigger other components from OxyExtras like Off Canvas and Slide Menu.

Option Controls

State on Page Load

Choose whether to have the burger already in its active state when the page first loads. This can be useful if being used with an off canvas element that is also set to be open on page load.

Animation Settings

Choose from 15 different burger animations & set the animation transition speed.

Button Styles

Common style options for the buttons in both the default state, the hover state and the active state.

Button Text

Add custom text inside the toggle button and style the typography.

Pro Tip

Setting the transition speed of the burger animation match the transition speed of the element it is triggering can help it feel like one, smooth interaction.



How to swap the Button text and hamburger icon?

Add this custom CSS to change the order from Button text and menu icon to menu icon and the Button text:

.oxy-burger-trigger .hamburger {
  flex-direction: row-reverse;