Hamburger

Default hamburger button to open the menu on screens below tablet.

Default 


			
				<button class="c-hamburger ">
	<div class="c-hamburger__bar c-hamburger__bar--top"></div>
	<div class="c-hamburger__bar c-hamburger__bar--middle"></div>
	<div class="c-hamburger__bar c-hamburger__bar--bottom"></div>
	<div class="c-hamburger__line c-hamburger__line--top-left"></div>
	<div class="c-hamburger__line c-hamburger__line--top-right"></div>
	<div class="c-hamburger__line c-hamburger__line--bottom-left"></div>
	<div class="c-hamburger__line c-hamburger__line--bottom-right"></div>
</button>

Is closed

When toggling the hamburger menu-icon, its state is updated towards a more is-closed version. This is done by applying the state-class is-closed.


			
				<button class="c-hamburger is-closed">
	<div class="c-hamburger__bar c-hamburger__bar--top"></div>
	<div class="c-hamburger__bar c-hamburger__bar--middle"></div>
	<div class="c-hamburger__bar c-hamburger__bar--bottom"></div>
	<div class="c-hamburger__line c-hamburger__line--top-left"></div>
	<div class="c-hamburger__line c-hamburger__line--top-right"></div>
	<div class="c-hamburger__line c-hamburger__line--bottom-left"></div>
	<div class="c-hamburger__line c-hamburger__line--bottom-right"></div>
</button>

Documentation

States

  • is-closed

    This indicates that the hamburger item is closed. It will animate from a hamburger icon into a cross icon.