Bootstrap docs

# Nav links

Horizontally or vertically stacked list links that provide a foundation for building all types of navigation components.

#### Basic example

    <!-- Basic nav links -->
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>

#### Underline effect

    <!-- All nav links inside .navbar automatically receive underline effect. -->
    <nav class="navbar navbar-expand p-0">
      <ul class="navbar-nav flex-wrap">
        <li class="nav-item">
          <a class="nav-link fs-sm active" aria-current="page" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-sm" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-sm" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-sm disabled">Disabled</a>
        </li>
      </ul>
    </nav>

#### Vertical alignment

    <!-- Vertically aligned basic nav links -->
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>

    <!-- Vertically aligned underline nav links (inside navbar) -->
    <nav class="navbar p-0">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link fs-sm active" aria-current="page" href="#">
            Active
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-sm" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-sm" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-sm disabled">Disabled</a>
        </li>
      </ul>
    </nav>

#### With icons and dropdowns

    <!-- Basic nav links example with icons and dropdown -->
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">
          <i class="ci-home opacity-75 me-2"></i>
          Home
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="ci-user opacity-75 me-2"></i>
          Profile
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
      </li>
    </ul>

    <!-- Underline nav links (inside navbar) example with icons and dropdown -->
    <nav class="navbar navbar-expand p-0">
      <ul class="navbar-nav flex-wrap">
        <li class="nav-item">
          <a class="nav-link fs-sm active" aria-current="page" href="#">
            <i class="ci-home opacity-75 me-2"></i>
            Home
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link fs-sm" href="#">
            <i class="ci-user opacity-75 me-2"></i>
            Profile
          </a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link fs-sm dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </nav>

#### Sizing

    <!-- Use .fs- (font-size) utility classes to control the size of nav links. -->

    <!-- Extra large (.fs-xl) -->
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link fs-xl active" aria-current="page" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fs-xl" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fs-xl" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fs-xl disabled">Disabled</a>
      </li>
    </ul>

    <!-- Large (.fs-lg) -->
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link fs-lg active" aria-current="page" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fs-lg" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fs-lg" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fs-lg disabled">Disabled</a>
      </li>
    </ul>

    <!-- Normal (.fs-base) -->
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link fs-base active" aria-current="page" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fs-base" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fs-base" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link fs-base disabled">Disabled</a>
      </li>
    </ul>

    <!-- Small (default) -->
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>

Top