Astro Navs - Ecommerce

Astro Navs component allows to create simple navigation. Navigation available in Astro shares general markup and styles, from the base .nav class to the active and disabled states.
Learn how to use Astro navigation from this documentation and navs examples to quickly and easily create elegant and flexible navs.

<div class="nav-wrapper position-relative end-0">
   <ul class="nav nav-pills nav-fill p-1" role="tablist">
      <li class="nav-item">
         <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#profile-tabs-simple" role="tab" aria-controls="profile" aria-selected="true">
         My Profile
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#dashboard-tabs-simple" role="tab" aria-controls="dashboard" aria-selected="false">
         Dashboard
         </a>
      </li>
    </ul>
</div>

Tabs with icons

<div class="nav-wrapper position-relative end-0">
  <ul class="nav nav-pills nav-fill p-1" role="tablist">
    <li class="nav-item">
      <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#profile-tabs-icons" role="tab" aria-controls="preview" aria-selected="true">
      <i class="ni ni-badge text-sm me-2"></i> My Profile
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#dashboard-tabs-icons" role="tab" aria-controls="code" aria-selected="false">
        <i class="ni ni-laptop text-sm me-2"></i> Dashboard
      </a>
    </li>
  </ul>
</div>

Vertical Tabs


<div class="nav-wrapper position-relative end-0">
  <ul class="nav nav-pills nav-fill flex-column p-1" role="tablist">
    <li class="nav-item">
      <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#profile-tabs-vertical" role="tab" aria-controls="preview" aria-selected="true">
        My Profile
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#dashboard-tabs-vertical" role="tab" aria-controls="code" aria-selected="false">
        Dashboard
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#payments-tabs-vertical" role="tab" aria-controls="code" aria-selected="false">
        Payments
      </a>
    </li>
  </ul>
</div>