Hamburger

Default hamburger button to open the menu.

Default

px

			
				<div class="c-hamburger js-hamburger ">
	<button class="c-hamburger__btn" aria-label="open menu">
		<span class="c-hamburger__item c-hamburger__item--top" role="none"></span>
		<span class="c-hamburger__item c-hamburger__item--middle" role="none"></span>
		<span class="c-hamburger__item c-hamburger__item--bottom" role="none"></span>
	</button>
	<span class="c-hamburger__text c-hamburger__text--open">Menu</span>
	<span class="c-hamburger__text c-hamburger__text--close">Close</span>
</div>
<div class="c-hamburger js-hamburger is-open">
	<button class="c-hamburger__btn" aria-label="open menu">
		<span class="c-hamburger__item c-hamburger__item--top" role="none"></span>
		<span class="c-hamburger__item c-hamburger__item--middle" role="none"></span>
		<span class="c-hamburger__item c-hamburger__item--bottom" role="none"></span>
	</button>
	<span class="c-hamburger__text c-hamburger__text--open">Menu</span>
	<span class="c-hamburger__text c-hamburger__text--close">Close</span>
</div>
			

		

Documentation

States

  • is-closed

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