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

chevron-down