Hamburger

A component used to toggle between the navigation when viewed on mobile/touch devices.

Default

px 

			
				<button class="a-hamburger js-hamburger ">
	<span class="a-hamburger__container">
		<span class="a-hamburger__bar a-hamburger__bar--top"></span>
		<span class="a-hamburger__bar a-hamburger__bar--middle"></span>
		<span class="a-hamburger__bar a-hamburger__bar--bottom"></span>
		<span class="a-hamburger__line a-hamburger__line--top-left"></span>
		<span class="a-hamburger__line a-hamburger__line--top-right"></span>
		<span class="a-hamburger__line a-hamburger__line--bottom-left"></span>
		<span class="a-hamburger__line a-hamburger__line--bottom-right"></span>
	</span>
</button>

Is closed

When toggling the hamburger menu-icon, its state is updated towards a more is-closed version.

px 

			
				<button class="a-hamburger js-hamburger is-closed">
	<span class="a-hamburger__container">
		<span class="a-hamburger__bar a-hamburger__bar--top"></span>
		<span class="a-hamburger__bar a-hamburger__bar--middle"></span>
		<span class="a-hamburger__bar a-hamburger__bar--bottom"></span>
		<span class="a-hamburger__line a-hamburger__line--top-left"></span>
		<span class="a-hamburger__line a-hamburger__line--top-right"></span>
		<span class="a-hamburger__line a-hamburger__line--bottom-left"></span>
		<span class="a-hamburger__line a-hamburger__line--bottom-right"></span>
	</span>
</button>

Documentation

States

  • is-closed

    Used to toggle between the closed state. Creates a closed icon, based upon the three lines defined in the default hamburger component.