Elixir Docs | Navigation

Navigation

A navigation bar helps in navigating across various pages in a website. They are also referred to as a navbar.

Elixir offers a Basic Navigation component which contains the following parts - Brand logo or title, search bar, navigation links, and an optional hamburger for medium and small screens.

Basic Navigation

The basic navigation consists of a brand name or logo, a search bar, links and an optional hamburger that appears on small/ medium sized screens.

To generate a basic navigation use the following classes: navigation-bar for the navigation container.
Other classes include-

navigation-desktop: Contains the navigation components that are displayed in medium to large screens.
navigation-mobile: Contains the search bar to enter the query text that is displayed in smaller screens.
brand-name.logo: Contains the brand name/ logo.
navigation-query: Contains the search bar to enter query text.
navigation-actions: Contains the navigation bar actions or links.
navigation-bar-hamburger: Contains the hamburger icon to open the navigation bar in smaller screens.
btn-navigation-close: Contains the close button to close the navigation bar in smaller screens.

Copy the code below to use the basic navigation.

<nav class="navigation-bar navigation-open py-1 px-2">
    <button class="btn-navigation-close btn btn-icon btn-primary">
        <span class="icon">
            <i class="fas fa-times fa-2x"></i>
        </span>
    </button>
    <div class="navigation-desktop">
        <h4 class="logo brand-name">
            <a href="#" class="btn btn-link btn-primary">
                bookery
            </a>
        </h4>
        
        <form class="navigation-query input-group input-default input-inline">
            <label class="text-label px-0-75 py-0-25" for="navigation-search-query">
                <button type="submit"  class="btn btn-icon">
                    <i class="fas fa-search"></i>
                </button>
                <input type="search" id="navigation-search-query" class="input-text p-0-25" placeholder="Search...">
            </label>
            <span class="text-message mt-0-25"></span>
        </form>
        
        <div class="navigation-bar-hamburger">
            <button class="btn btn-primary btn-icon">
                <span class="icon">
                    <i class="fas fa-bars"></i>
                </span>
            </button>
        </div>
        
        <div class="navigation-actions">
            <a href="#" class="btn btn-icon btn-login">
                <span class="icon icon-account">
                    <i class="fas fa-user"></i>
                </span>
            </a>
            <a href="#" class="btn btn-icon badge-container btn-wishlist">
                <span class="badge-status badge-notification badge-primary">4</span> 
                <span class="icon icon-heart badge-icon">
                    <i class="far fa-heart"></i>
                </span>
            </a>
            <a href="#" class="btn btn-icon badge-container btn-cart">
                <span class="badge-status badge-notification badge-primary">2</span> 
                <span class="icon icon-cart badge-icon">
                    <i class="fas fa-shopping-cart"></i>
                </span>
            </a>
        </div>
    </div>
    <div class="navigation-mobile">
        <form class="navigation-query input-group input-default input-inline">
            <label class="text-label flex--row flex--align-center px-0-75 py-0-25" for="navigation-search-query">
                <button type="submit"  class="btn btn-icon">
                    <i class="fas fa-search"></i>
                </button>
                <input type="search" id="navigation-search-query" class="input-text p-0-25" placeholder="Search...">
            </label>
            <span class="text-message mt-0-25"></span>
        </form>
    </div>
</nav>

Copy the code below to use the JavaScript logic to toggle between navigation bar open and close.

/* Reference to the navigatio bar */
const navigation = document.querySelector('.navigation-bar');

/* Reference to the navigatio bar hamburger icon */
const navigationHamburger = document.querySelector('.navigation-bar-hamburger');

/* Reference to the navigatio bar close icon*/
const navigationCloseButton = document.querySelector('.btn-navigation-close');

/* Attaching listeners on hamburger and navigation close buttons to listen for click event */
navigationHamburger.addEventListener('click', openNavigation);
navigationCloseButton.addEventListener('click', openNavigation);

/* Handler that toggles navigation bar open status */
function openNavigation(e) {
    navigation.classList.toggle('navigation-open');
}