Nav

LeptonX uses Bootstrap Nav's component's latest version.
Documentation and examples for how to use Bootstrap’s included navigation components.

Base nav

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.

The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

Preview

HTML

<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" href="#" tabindex="-1" aria-disabled="true"
      >Disabled</a
    >
  </li>
</ul>

Nav Alignment

Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned.

Centered with .justify-content-center:

Right-aligned with .justify-content-end:

Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

Preview

HTML

<ul class="nav justify-content-start">
  <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" href="#" tabindex="-1" aria-disabled="true"
      >Disabled</a
    >
  </li>
</ul>
<ul class="nav justify-content-center">
  <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" href="#" tabindex="-1" aria-disabled="true"
      >Disabled</a
    >
  </li>
</ul>
<ul class="nav justify-content-end">
  <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" href="#" tabindex="-1" aria-disabled="true"
      >Disabled</a
    >
  </li>
</ul>

Tabs

Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.

Preview

Home Content

Profile Content

Contact Content

HTML

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button
      class="nav-link active"
      id="home-tab"
      data-bs-toggle="tab"
      data-bs-target="#home"
      type="button"
      role="tab"
      aria-controls="home"
      aria-selected="true"
    >
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button
      class="nav-link"
      id="profile-tab"
      data-bs-toggle="tab"
      data-bs-target="#profile"
      type="button"
      role="tab"
      aria-controls="profile"
      aria-selected="false"
    >
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button
      class="nav-link"
      id="contact-tab"
      data-bs-toggle="tab"
      data-bs-target="#contact"
      type="button"
      role="tab"
      aria-controls="contact"
      aria-selected="false"
    >
      Contact
    </button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div
    class="tab-pane fade show active"
    id="home"
    role="tabpanel"
    aria-labelledby="home-tab"
  >
    Home Content
  </div>
  <div
    class="tab-pane fade"
    id="profile"
    role="tabpanel"
    aria-labelledby="profile-tab"
  >
    Profile Content
  </div>
  <div
    class="tab-pane fade"
    id="contact"
    role="tabpanel"
    aria-labelledby="contact-tab"
  >
    Contact Content
  </div>
</div>

Pills

Take that same HTML, but use .nav-pills instead:

Preview

Home Content

Profile Content

Contact Content

HTML

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button
      class="nav-link active"
      id="pills-home-tab"
      data-bs-toggle="pill"
      data-bs-target="#pills-home"
      type="button"
      role="tab"
      aria-controls="pills-home"
      aria-selected="true"
    >
      Home
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button
      class="nav-link"
      id="pills-profile-tab"
      data-bs-toggle="pill"
      data-bs-target="#pills-profile"
      type="button"
      role="tab"
      aria-controls="pills-profile"
      aria-selected="false"
    >
      Profile
    </button>
  </li>
  <li class="nav-item" role="presentation">
    <button
      class="nav-link"
      id="pills-contact-tab"
      data-bs-toggle="pill"
      data-bs-target="#pills-contact"
      type="button"
      role="tab"
      aria-controls="pills-contact"
      aria-selected="false"
    >
      Contact
    </button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div
    class="tab-pane fade show active"
    id="pills-home"
    role="tabpanel"
    aria-labelledby="pills-home-tab"
  >
    Home Content
  </div>
  <div
    class="tab-pane fade"
    id="pills-profile"
    role="tabpanel"
    aria-labelledby="pills-profile-tab"
  >
    Profile Content
  </div>
  <div
    class="tab-pane fade"
    id="pills-contact"
    role="tabpanel"
    aria-labelledby="pills-contact-tab"
  >
    Contact Content
  </div>
</div>

Vertical Pills

Preview

Home Content

Profile Content

Messages Content

Settings Content

HTML

<div class="d-flex align-items-start">
  <div
    class="nav flex-column nav-pills me-3"
    id="v-pills-tab"
    role="tablist"
    aria-orientation="vertical"
  >
    <button
      class="nav-link active"
      id="v-pills-home-tab"
      data-bs-toggle="pill"
      data-bs-target="#v-pills-home"
      type="button"
      role="tab"
      aria-controls="v-pills-home"
      aria-selected="true"
    >
      Home
    </button>
    <button
      class="nav-link"
      id="v-pills-profile-tab"
      data-bs-toggle="pill"
      data-bs-target="#v-pills-profile"
      type="button"
      role="tab"
      aria-controls="v-pills-profile"
      aria-selected="false"
    >
      Profile
    </button>
    <button
      class="nav-link"
      id="v-pills-messages-tab"
      data-bs-toggle="pill"
      data-bs-target="#v-pills-messages"
      type="button"
      role="tab"
      aria-controls="v-pills-messages"
      aria-selected="false"
    >
      Messages
    </button>
    <button
      class="nav-link"
      id="v-pills-settings-tab"
      data-bs-toggle="pill"
      data-bs-target="#v-pills-settings"
      type="button"
      role="tab"
      aria-controls="v-pills-settings"
      aria-selected="false"
    >
      Settings
    </button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div
      class="tab-pane fade show active"
      id="v-pills-home"
      role="tabpanel"
      aria-labelledby="v-pills-home-tab"
    >
      Home Content
    </div>
    <div
      class="tab-pane fade"
      id="v-pills-profile"
      role="tabpanel"
      aria-labelledby="v-pills-profile-tab"
    >
      Profile Content
    </div>
    <div
      class="tab-pane fade"
      id="v-pills-messages"
      role="tabpanel"
      aria-labelledby="v-pills-messages-tab"
    >
      Messages Content
    </div>
    <div
      class="tab-pane fade"
      id="v-pills-settings"
      role="tabpanel"
      aria-labelledby="v-pills-settings-tab"
    >
      Settings Content
    </div>
  </div>
</div>

Tabs with dropdowns

Preview

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a
      class="nav-link active"
      id="dd-home-tab"
      data-bs-toggle="tab"
      data-bs-target="#dd-home"
      type="button"
      role="tab"
      aria-controls="dd-home"
      aria-selected="true"
      >Home</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>
        <button
          class="dropdown-item"
          id="dd-setting-tab"
          data-bs-toggle="tab"
          data-bs-target="#dd-settings"
          type="button"
          role="tab"
          aria-controls="dd-settings"
        >
          Settings
        </button>
      </li>
      <li>
        <button
          class="dropdown-item"
          id="dd-profile-tab"
          data-bs-toggle="tab"
          data-bs-target="#dd-profile"
          type="button"
          role="tab"
          aria-controls="dd-profile"
        >
          Profile
        </button>
      </li>
      <li><hr class="dropdown-divider" /></li>
      <li>
        <button
          class="dropdown-item"
          id="dd-messages-tab"
          data-bs-toggle="tab"
          data-bs-target="#dd-messages"
          type="button"
          role="tab"
          aria-controls="dd-messages"
        >
          Messages
        </button>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
      >Disabled</a
    >
  </li>
</ul>
<div class="tab-content" id="dropdown-example">
  <div
    class="tab-pane fade show active"
    id="dd-home"
    role="tabpanel"
    aria-labelledby="dd-home-tab"
  >
    Home Content
  </div>
  <div
    class="tab-pane fade"
    id="dd-profile"
    role="tabpanel"
    aria-labelledby="dd-profile-tab"
  >
    Profile Content
  </div>
  <div
    class="tab-pane fade"
    id="dd-settings"
    role="tabpanel"
    aria-labelledby="dd-settings-tab"
  >
    Settings Content
  </div>
  <div
    class="tab-pane fade"
    id="dd-messages"
    role="tabpanel"
    aria-labelledby="dd-messages-tab"
  >
    Messages Content
  </div>
</div>

Pills with dropdowns

Preview

HTML

<ul class="nav nav-pills">
  <li class="nav-item">
    <a
      class="nav-link active"
      id="dd-pill-home-tab"
      data-bs-toggle="tab"
      data-bs-target="#dd-pill-home"
      type="button"
      role="tab"
      aria-controls="dd-pill-home"
      aria-selected="true"
      >Home</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>
        <button
          class="dropdown-item"
          id="dd-pill-setting-tab"
          data-bs-toggle="tab"
          data-bs-target="#dd-pill-settings"
          type="button"
          role="tab"
          aria-controls="dd-pill-settings"
        >
          Settings
        </button>
      </li>
      <li>
        <button
          class="dropdown-item"
          id="dd-pill-profile-tab"
          data-bs-toggle="tab"
          data-bs-target="#dd-pill-profile"
          type="button"
          role="tab"
          aria-controls="dd-pill-profile"
        >
          Profile
        </button>
      </li>
      <li><hr class="dropdown-divider" /></li>
      <li>
        <button
          class="dropdown-item"
          id="dd-pill-messages-tab"
          data-bs-toggle="tab"
          data-bs-target="#dd-pill-messages"
          type="button"
          role="tab"
          aria-controls="dd-pill-messages"
        >
          Messages
        </button>
      </li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"
      >Disabled</a
    >
  </li>
</ul>
<div class="tab-content" id="dropdown-example">
  <div
    class="tab-pane fade show active"
    id="dd-pill-home"
    role="tabpanel"
    aria-labelledby="dd-pill-home-tab"
  >
    Home Content
  </div>
  <div
    class="tab-pane fade"
    id="dd-pill-profile"
    role="tabpanel"
    aria-labelledby="dd-pill-profile-tab"
  >
    Profile Content
  </div>
  <div
    class="tab-pane fade"
    id="dd-pill-settings"
    role="tabpanel"
    aria-labelledby="dd-pill-settings-tab"
  >
    Settings Content
  </div>
  <div
    class="tab-pane fade"
    id="dd-pill-messages"
    role="tabpanel"
    aria-labelledby="dd-pill-messages-tab"
  >
    Messages Content
  </div>
</div>

About Privacy Contact