PhilBranding Phillip Mudavanhu UX Designer Logo Designer Buy now

Pills

It's a button-like navigation component.

Bootstrap docs

Basic example

<!-- Nav pills -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
// Nav pills
ul(class="nav nav-pills")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled", tabindex="-1", aria-disabled="true")
      | Disabled

Pill shaped pills

<!-- Rounded nav pills -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="#" class="nav-link btn-pill active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link btn-pill">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link btn-pill">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link btn-pill disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
// Rounded nav pills
ul(class="nav nav-pills")
  li.nav-item
    a(href="#", class="nav-link btn-pill active")
      | Active
  li.nav-item
    a(href="#", class="nav-link btn-pill")
      | Link
  li.nav-item
    a(href="#", class="nav-link btn-pill")
      | Link
  li.nav-item
    a(href="#", class="nav-link btn-pill disabled", tabindex="-1", aria-disabled="true")
      | Disabled

Fill and justify

<!-- Nav pills: Fill -->
<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

<!-- Nav pills: Justified -->
<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
// Nav pills: Fill
ul(class="nav nav-pills nav-fill")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Much longer nav link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled",  tabindex="-1", aria-disabled="true")
      | Disabled

// Nav pills: Justified
ul(class="nav nav-pills nav-justified")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled",  tabindex="-1", aria-disabled="true")
      | Disabled

Pills with dropdowns

<!-- Pills with dropdowns -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item">Action</a>
      <a href="#" class="dropdown-item">Another action</a>
      <a href="#" class="dropdown-item">Something else here</a>
      <div class="dropdown-divider"></div>
      <a href="#" class="dropdown-item">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
// Pills with dropdowns
ul(class="nav nav-pills")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item.dropdown
    a(href="#", class="nav-link dropdown-toggle", data-toggle="dropdown", role="button", aria-haspopup="true", aria-expanded="false")
      | Dropdown
    .dropdown-menu
      a(href='#').dropdown-item Action
      a(href='#').dropdown-item Another action
      a(href='#').dropdown-item Something else here
      .dropdown-divider
      a(href='#').dropdown-item Separated link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled",  tabindex="-1", aria-disabled="true")
      | Disabled

Vertical pills

<!-- Vertical pills -->
<ul class="nav nav-pills flex-column">
  <li class="nav-item">
    <a href="#" class="nav-link active">Active</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link">Link</a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
// Vertical pills
ul(class="nav nav-pills flex-column")
  li.nav-item
    a(href="#", class="nav-link active")
      | Active
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link")
      | Link
  li.nav-item
    a(href="#", class="nav-link disabled", tabindex="-1", aria-disabled="true")
      | Disabled

JavaScript behavior

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<!-- Nav pills -->
<ul class="nav nav-pills mb-3" role="tablist">
  <li class="nav-item">
    <a href="#" class="nav-link active" id="pills-home1" data-toggle="pill" role="tab" aria-controls="home1" aria-selected="true">
      <i class="fe-home mr-2"></i>
      Home
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link" id="pills-profile1" data-toggle="pill" role="tab" aria-controls="profile1" aria-selected="false">
      <i class="fe-user mr-2"></i>
      Profile
    </a>
  </li>
  <li class="nav-item">
    <a href="#" class="nav-link" id="pills-messages1" data-toggle="pill" role="tab" aria-controls="messages1" aria-selected="false">
      <i class="fe-message-square mr-2"></i>
      Messages
    </a>
  </li>
</ul>

<!-- Pills content -->
<div class="tab-content">
  <div id="home1" class="tab-pane fade show active" role="tabpanel" aria-labelledby="pills-home1">
    ...
  </div>
  <div id="profile1" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-profile1">
    ...
  </div>
  <div id="messages1" class="tab-pane fade" role="tabpanel" aria-labelledby="pills-messages1">
    ...
  </div>
</div>
// Nav pills
ul(class="nav nav-pills mb-3", role="tablist")
  li.nav-item
    a(href="#home1", class="nav-link active", id="pills-home1", data-toggle="pill", role="tab", aria-controls="home1", aria-selected="true")
      i.fe-home.mr-2
      | Home
  li.nav-item
    a(href="#profile1", class="nav-link", id="pills-profile1", data-toggle="pill", role="tab", aria-controls="profile1", aria-selected="false")
      i.fe-user.mr-2
      | Profile
  li.nav-item
    a(href="#messages1", class="nav-link", id="pills-messages1", data-toggle="pill", role="tab", aria-controls="messages1", aria-selected="false")
      i.fe-message-square.mr-2
      | Messages

// Pills content
.tab-content
  #home1.tab-pane.fade.show.active(role="tabpanel", aria-labelledby="pills-home1")
    | ...
  #profile1.tab-pane.fade(role="tabpanel", aria-labelledby="pills-profile1")
    | ...
  #messages1.tab-pane.fade(role="tabpanel", aria-labelledby="pills-messages1")
    | ...
Top