<button class="hamburger btn" type="button">
	<?xml version="1.0" encoding="utf-8"?>
	<svg
		class='hamburger__icon hamburger__close'
		version="1.1"
		id="Layer_1"
		xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink"
		x="0px"
		y="0px"
		width="24px"
		height="24px"
		viewBox="0 0 24 24"
		enable-background="new 0 0 24 24"
		xml:space="preserve">
	<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/>
	</svg>
	<?xml version="1.0" encoding="utf-8"?>
	<svg
		class='hamburger__icon hamburger__open'
		version="1.1"
		id="Layer_1"
		xmlns="http://www.w3.org/2000/svg"
		xmlns:xlink="http://www.w3.org/1999/xlink"
		x="0px"
		y="0px"
		width="24px"
		height="24px"
		viewBox="0 0 24 24"
		enable-background="new 0 0 24 24"
		xml:space="preserve">
	<path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
	</svg>
</button>
<button class="hamburger btn" type="button">
	{{> @icon icon=closeIcon class="hamburger__icon hamburger__close"}}
	{{> @icon icon=openIcon class="hamburger__icon hamburger__open"}}
</button>
{
  "openIcon": "<path d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\"/>",
  "closeIcon": "<path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/><path d=\"M0 0h24v24H0z\" fill=\"none\"/>"
}
  • Content:
    const hamburger = document.getElementsByClassName('hamburger')
    hamburger[0].addEventListener('click', function() {
    	console.log('Burger click')
    	document.body.classList.toggle('menu--is-visible')
    	this.classList.toggle('hamburger--is-open')
    }, false)
  • URL: /components/raw/hamburger/hamburger.js
  • Filesystem Path: components/07-navigation/03-hamburger/hamburger.js
  • Size: 250 Bytes
  • Content:
    const hamburger = document.getElementsByClassName('hamburger')
    hamburger[0].addEventListener('click', function() {
    	console.log('Burger click')
    	document.body.classList.toggle('menu--is-visible')
    	this.classList.toggle('hamburger--is-open')
    }, false)
  • URL: /components/raw/hamburger/hamburger.js
  • Filesystem Path: components/07-navigation/03-hamburger/hamburger.js
  • Size: 250 Bytes

Hamburger

The Hamburger controls the visibility of the main navigation for a view on a small screen.