Feedback
Navbar
The header of the website which includes navigation.
Elements
The component is composed of multiple elements:
navbarthe wrappernavbar__buttonThe hamburger icon button to open the menu on small devicesnavbar__mainthe main element of the navbar, which usually includes the logonavbar__navthe navigation elements
It is paramount to follow that patern and include the navigation elements in the navbar__nav element, as it drives the responsiveness of the menu.
<header class="section navbar">
<div class="section__container">
<div class="navbar__main">
<div class="navbar__logo">
<h1>Logo</h1>
</div>
<button aria-label="Open mobile menu" class="navbar__button">
<span></span>
</button>
</div>
<nav class="navbar__nav nav">
<div class="nav__container">
<ul class="nav__group">
<li class="nav__item"><a href="" class="nav__trigger">Nav 1</a></li>
<li class="nav__item"><a href="" class="nav__trigger">Nav 2</a></li>
</ul>
</div>
</nav>
</div>
</header>Properties
Add classes to the wrapper class to change the style of the component.
Alignement
Change the position of the logo on the navbar
class="navbar"
Default
class="navbar navbar--right"