Navigation

Navigation is uesd to navigate smoothly throughout the web apps.

Navigation example

To use navigation component in your app, check the below code for better understanding.


<nav class="nav-bar boxShadow">
    <div class="nav-innerContainer docSite-nav-clr">
        <h2 class="nav-heading">Cosmic UI</h2>
    </div>
    <div class="nav-innerContainer nav-icon-container">
        <a
            class="docSite-nav-clr"
            href="https://www.linkedin.com/in/abhishek-sahani-698b12135/"
            ><i class="fa-brands fa-linkedin icon-resize"></i
        ></a>
        <a
            class="docSite-nav-clr nav-icon"
            href="https://github.com/abhisheksahani-nova"
            ><i class="fa fa-github nav-icon"></i
        ></a>
    </div>
</nav>


<nav class="nav-bar white mb-0">
    <div class="nav-innerContainer font-clr">
      <h2 class="nav-heading mr-4 font-resize">Plant.</h2>
    </div>

    <div class="nav-innerContainer font-clr width-auto">
      <input class="nav_searchBar" type="text" />
      <span class="searchBar_icon"
        ><i class="fa-solid fa-magnifying-glass"></i
      ></span>
    </div>

    <div
      class="nav-innerContainer nav-icon-container width-reset inherit-clr mr-1"
    >
      <div class="flex-col-center">
        <a class="font-clr" href="#"><i class="fa-solid fa-heart"></i></a>
        <small>Wishlist</small>
      </div>

      <div class="flex-col-center">
        <a class="font-clr" href="#"><i class="fa-solid fa-user"></i></a>
        <small>Profile</small>
      </div>

      <div class="flex-col-center">
        <a class="font-clr nav-icon" href="#"
          ><i class="fa-solid fa-cart-shopping"></i
        ></a>
        <small>Cart</small>
      </div>
    </div>
</nav>