Bottom navigation

The bottom nav has 2 varieties. The default bottom nav shows both text and an icon. The icon modification however will only show an icon. Once an navigation element is active it will show both the text and icon of that specific item.

Default

For the bottom navigation to work you need to start with an element class .bottom-nav. After that you need an container class .bottom-nav__items which contains all the items. After that you can start adding the navigation items with class .bottom-nav__item. Each item can contain an icon .bottom_nav__item__icon and text .bottom-nav__item__text.

    
<nav class="bottom-nav">
    <a href="#" class="bottom-nav__item">
        <div class="bottom-nav__item__icon">
            <i class="material-icons icon">person</i>
        </div>
        <div class="bottom-nav__item__text">Persons</div>
    </a>
    <a href="#" class="bottom-nav__item">
        <div class="bottom-nav__item__icon">
            <i class="material-icons icon">person</i>
        </div>
        <div class="bottom-nav__item__text">Persons</div>
    </a>
    <a href="#" class="bottom-nav__item bottom-nav__item--active">
        <div class="bottom-nav__item__icon">
            <i class="material-icons icon">person</i>
        </div>
        <div class="bottom-nav__item__text">Active</div>
    </a>
</nav>

Icon only

If you prefer to only show the text when an item is active you can add the class .bottom-nav---icon-only to the class .bottom-nav.

    
<nav class="bottom-nav bottom-nav--icon-only">
    <a href="#" class="bottom-nav__item">
        <div class="bottom-nav__item__icon">
            <i class="material-icons icon">person</i>
        </div>
        <div class="bottom-nav__item__text">Persons</div>
    </a>
    <a href="#" class="bottom-nav__item">
        <div class="bottom-nav__item__icon">
            <i class="material-icons icon">person</i>
        </div>
        <div class="bottom-nav__item__text">Persons</div>
    </a>
    <a href="#" class="bottom-nav__item bottom-nav__item--active">
        <div class="bottom-nav__item__icon">
            <i class="material-icons icon">person</i>
        </div>
        <div class="bottom-nav__item__text">Active</div>
    </a>
</nav>

Settings

Scss	CSS	Result
$bottom-nav-background	--bottom-nav-background	Change bottom nav background
$bottom-nav-height	--bottom-nav-height	Change bottom nav height
$bottom-nav__icon-size	--bottom-nav__icon-size	Change bottom nav icon size
$bottom-nav__item-min-width	--bottom-nav__item-min-width	Change bottom nav item min width
$bottom-nav__item-max-width	--bottom-nav__item-max-width	Change bottom nav item max width
$bottom-nav__item-padding	--bottom-nav__item-padding	Change bottom nav item padding
$bottom-nav__item__text-font-size	--bottom-nav__item__text-font-size	Change bottom nav item text font size
$bottom-nav__item-color	--bottom-nav__item-color	Change bottom nav item color
$bottom-nav__item--hover-color	--bottom-nav__item--hover-color	Change bottom nav item hover color
$bottom-nav--icon-only__item-padding	--bottom-nav--icon-only__item-padding	Change bottom nav icon only item padding
$bottom-nav--icon-only__item--active-padding	--bottom-nav--icon-only__item--active-padding	Change bottom nav icon only active padding