Navbar Component
A CSS implementation of the Sprout navbar component.
Related
Sprout Navbar documentation [external]
Example
html
<div style="height: 200px">
<div class="spr-nav" style="position: relative">
<div class="spr-nav-header">
<div class="spr-nav-header-contents">
<div class="spr-nav-left">
<h1>Brand</h1>
</div>
<div class="spr-nav-right">
<div class="spr-nav-toggler">
<i class="spr-icon spr-icon-hamburger"></i>
</div>
<div class="spr-tabs spr-tabs-lg">
<div class="spr-tab">
<span class="active">Wolves</span>
</div>
<div class="spr-tab">
<span>Chickens</span>
</div>
<div class="spr-tab">
<span>Badgers</span>
</div>
</div>
<div class="spr-nav-icons">
<div class="spr-nav-icon">
<i class="spr-icon spr-icon-bell"></i>
</div>
<div class="spr-nav-icon">
<i class="spr-icon spr-icon-help"></i>
</div>
<div class="spr-nav-icon">
<i class="spr-icon spr-icon-user"></i>
</div>
</div>
</div>
</div>
</div>
<div class="spr-nav-subheader">
<div class="spr-nav-subheader-contents">
<div class="spr-tabs spr-tabs-sm">
<div class="spr-tab">
<span>Broccoli</span>
</div>
<div class="spr-tab">
<span class="active">Celery</span>
</div>
<div class="spr-tab">
<span>Cabbage</span>
</div>
<div class="spr-tab">
<span>Pepper</span>
</div>
<div class="spr-tab">
<span>Onion</span>
</div>
</div>
</div>
</div>
</div>
</div>
Compiled CSS
Example
scss
@import 'components/navbar';