Navigation

Navigation bar is helpful for switching between two pages of a website/ web App.

Simple Navigation

Simple Navigation can be used by giving the class name .nav-simple-container. Additional classes like .nav-simple-brand, .nav-simple-item, .nav-hamburger-menu can be added inside the container. The destination page url can be given in href of <a> tag.

Copy
        <nav class="nav-simple-container space-S rounded-med">
            <a class="nav-simple-brand" href="#">
                My Brand
            </a>

            <ul>
                <li class="nav-simple-item space-S"><a href="#">Home</a></li>
                <li class="nav-simple-item space-S"><a href="#">Products</a></li>
                <li class="nav-simple-item space-S"><a href="#">Blog</a></li>
                <li class="nav-simple-item space-S"><a href="#">About Us</a></li>
                <i class="nav-hamburger-menu space-S fas fa-bars"></i>
            </ul>
        </nav>