# Navs | Soft UI Dashboard Bootstrap @ Creative Tim
A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs.
Author: Creative Tim
Keywords: creative tim, updivision, html dashboard, laravel, html css dashboard laravel, soft ui dashboard laravel, laravel soft ui dashboard, soft ui admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, soft ui dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, soft ui dashboard, soft ui laravel bootstrap 5 dashboard

# Bootstrap Navs

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

## Nav pills

Copy

    <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

Copy

    <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

Copy

    <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>