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.
Usage
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.
Tutorials
FAQ
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;
}