<div class="scl-navbar-menu"> <div class="scl-navbar-items"> <div class="scl-navbar-content" data-dropdown> <button class="scl-dropdown-name" data-dropdown-button> Name <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" /> </button> <div class="scl-dropdown-menu"> <a href="#" class="scl-dropdown-content">drop down-content-1</a> <a href="#" class="scl-dropdown-content">drop down-content-2</a> <a href="#" class="scl-dropdown-content">drop down-content-3</a> <a href="#" class="scl-dropdown-content">drop down-content-4</a> </div> </div> <div class="scl-navbar-content" data-dropdown> <button class="scl-dropdown-name" data-dropdown-button> Home <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" /> </button> <div class="scl-dropdown-menu"> <a href="#" class="scl-dropdown-content">drop down-content-1</a> <a href="#" class="scl-dropdown-content">drop down-content-2</a> <a href="#" class="scl-dropdown-content">drop down-content-3</a> <a href="#" class="scl-dropdown-content">drop down-content-4</a> </div> </div> <div class="scl-navbar-content" data-dropdown> <button class="scl-dropdown-name" data-dropdown-button> More <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" /> </button> <div class="scl-dropdown-menu"> <a href="#" class="scl-dropdown-content">drop down-content-1</a> <a href="#" class="scl-dropdown-content">drop down-content-2</a> <a href="#" class="scl-dropdown-content">drop down-content-3</a> <a href="#" class="scl-dropdown-content">drop down-content-4</a> </div> </div> </div> <div class="scl-hamburger-container"> <div class="scl-hamburger"></div> <div class="scl-hamburger"></div> <div class="scl-hamburger"></div> </div> </div> <!-- navbar for phone --> <aside class="scl-side-bar"> <div class="scl-navbar-items-phone"> <div class="scl-navbar-content-phone" data-dropdown-phone> <button class="scl-dropdown-name-phone" data-dropdown-button-phone> Name <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" /> </button> <div class="scl-dropdown-menu-phone"> <a href="#" class="scl-dropdown-content-phone">drop down-content-1</a> <a href="#" class="scl-dropdown-content-phone">drop down-content-2</a> <a href="#" class="scl-dropdown-content-phone">drop down-content-3</a> <a href="#" class="scl-dropdown-content-phone">drop down-content-4</a> </div> </div> <div class="scl-navbar-content-phone" data-dropdown-phone> <button class="scl-dropdown-name-phone" data-dropdown-button-phone> Home <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" /> </button> <div class="scl-dropdown-menu-phone"> <a href="#" class="scl-dropdown-content-phone">drop down-content-1</a> <a href="#" class="scl-dropdown-content-phone">drop down-content-2</a> <a href="#" class="scl-dropdown-content-phone">drop down-content-3</a> <a href="#" class="scl-dropdown-content-phone">drop down-content-4</a> </div> </div> <div class="scl-navbar-content-phone" data-dropdown-phone> <button class="scl-dropdown-name-phone" data-dropdown-button-phone> More <img class="scl-dropdown-arrow" data-dropdown-button src="caret-down-solid.svg" /> </button> <div class="scl-dropdown-menu-phone"> <a href="#" class="scl-dropdown-content-phone">drop down-content-1</a> <a href="#" class="scl-dropdown-content-phone">drop down-content-2</a> <a href="#" class="scl-dropdown-content-phone">drop down-content-3</a> <a href="#" class="scl-dropdown-content-phone">drop down-content-4</a> </div> </div> </div> </aside>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter