Skip to main content

Navbar

Standard


<nav class="navbar">
<div class="navbar__inner">
<div class="navbar__items">
<a class="navbar__brand">Infima</a>
<a class="navbar__item navbar__link" href="#url">Docs</a>
<a class="navbar__item navbar__link" href="#url">Tutorial</a>
<div class="navbar__item dropdown dropdown--hoverable">
<a class="navbar__link" href="#url">v2.0</a>
<ul class="dropdown__menu">
<li>
<a class="dropdown__link" href="#url">v1.8.0</a>
</li>
<li>
<a class="dropdown__link" href="#url">v1.7.0</a>
</li>
<li>
<a class="dropdown__link" href="#url">v1.6.0</a>
</li>
<li>
<a class="dropdown__link" href="#url">All Versions</a>
</li>
</ul>
</div>
</div>
<div class="navbar__items navbar__items--right">
<form>
<div class="navbar__search">
<input class="navbar__search-input" placeholder="Search" />
</div>
</form>
</div>
</div>
</nav>

Dark


<nav class="navbar navbar--dark">
<div class="navbar__inner">
<div class="navbar__items">
<a class="navbar__brand">Infima</a>
<div class="navbar__item dropdown dropdown--hoverable">
<a class="navbar__item navbar__link" href="#url">v2.0</a>
<ul class="dropdown__menu">
<li>
<a class="dropdown__link" href="#url">v1.8.0</a>
</li>
<li>
<a class="dropdown__link" href="#url">v1.7.0</a>
</li>
<li>
<a class="dropdown__link" href="#url">v1.6.0</a>
</li>
<li>
<a class="dropdown__link" href="#url">All Versions</a>
</li>
</ul>
</div>
</div>
<div class="navbar__items navbar__items--right">
<a class="navbar__item navbar__link" href="#url">Docs</a>
<a class="navbar__item navbar__link" href="#url">Tutorial</a>
<form>
<div class="navbar__search">
<input class="navbar__search-input" placeholder="Search" />
</div>
</form>
</div>
</div>
</nav>

With Dropdown Menu


<nav class="navbar navbar--primary">
<div class="navbar__inner">
<div class="navbar__items">
<a class="navbar__item navbar__link" href="#url">Docs</a>
<a class="navbar__item navbar__link" href="#url">Tutorial</a>
<div class="navbar__item dropdown dropdown--hoverable">
<a class="navbar__link" href="#url">v2.0</a>
<ul class="dropdown__menu">
<li>
<a class="dropdown__link" href="#url">v1.8.0</a>
</li>
<li>
<a class="dropdown__link" href="#url">v1.7.0</a>
</li>
<li>
<a class="dropdown__link" href="#url">v1.6.0</a>
</li>
<li>
<a class="dropdown__link" href="#url">All Versions</a>
</li>
</ul>
</div>
</div>
<div class="navbar__items navbar__items--center">
<a class="navbar__brand">Infima</a>
</div>
<div class="navbar__items navbar__items--right">
<div class="navbar__item dropdown dropdown--hoverable dropdown--right">
<a class="navbar__link" href="#url">
Languages
<i class="fas fa-language fa-2x"></i>
</a>
<ul class="dropdown__menu">
<li>
<a class="dropdown__link" href="#url">简体中文</a>
</li>
<li>
<a class="dropdown__link" href="#url">日本語</a>
</li>
<li>
<a class="dropdown__link" href="#url">Français</a>
</li>
<li>
<a class="dropdown__link" href="#url">Español</a>
</li>
</ul>
</div>
<a class="navbar__item navbar__link" href="#url">
<i class="fab fa-github fa-lg"></i>
</a>
<form>
<div class="navbar__search">
<input class="navbar__search-input" placeholder="Search" />
</div>
</form>
</div>
</div>
</nav>