Tabs

Tabs are used to organize content, to help to reduce page scroll and make content easier to read.  When organizing text-heavy content, always consider using tabs, and take into consideration how users will read and navigate through the site.

Tabs Example

Below is an example of tabs menu with accompanying content.

Section One

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Section Two

Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Section Three

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. 

<!-- Tab Navigation -->

 <nav id="tab-bar" class="navbar navbar-expand-md navigation-menu">
    <div class="container">
      <button class="navbar-toggler tab-toggler collapsed" type="button" data-toggle="collapse" data-target="#tabMenu" aria-controls="tabMenu" aria-expanded="false" aria-label="Toggle navigation">
      Active Text
    </button>
      <div class="collapse navbar-collapse tab-collapse" id="tabMenu">
        <nav class="navbar-nav nav nav-pills flex-column flex-lg-row flex-md-row" id="myTab" role="tablist">
          <a class="nav-item nav-link active" id="tab-one-label" data-toggle="tab" href="#tab-one" role="tab" aria-controls="nav-one" aria-selected="true">Section One</a>
          <a class="nav-item nav-link" id="tab-two-label" data-toggle="tab" href="#tab-two" role="tab" aria-controls="nav-two" aria-selected="false">Section Two</a>
          <a class="nav-item nav-link" id="tab-three-label" data-toggle="tab" href="#tab-three" role="tab" aria-controls="nav-three" aria-selected="false">Section Three</a>
        </nav>
      </div>
    </div>
  </nav>

<!-- Tab Content -->

<div class="tab-content" id="nav-tabContent">
<!-- Tab Section 1 -->
 <div class="tab-pane fade show active pt-5" id="tab-one" role="tabpanel" aria-labelledby="tab-one-label">
          <h3>Section One</h3>
          <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
        </div>
<!-- Tab Section 2 -->
 <div class="tab-pane fade pt-5" id="tab-two" role="tabpanel" aria-labelledby="tab-two-label">
          <h3>Section Two</h3>
          <p> Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
        </div>
<!-- Tab Section 3 -->
 <div class="tab-pane fade pt-5" id="tab-three" role="tabpanel" aria-labelledby="tab-three-label">
          <h3>Section Three</h3>
          <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </p>
        </div>
  </div>

Full Width Tabs Example

Tabs can auto fit the full width of the screen by utilizing the nav-fill class

Section One

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Section Two

Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Section Three

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. 

<!-- Tab Navigation -->

 <nav id="tab-bar" class="navbar navbar-expand-md navigation-menu">
    <div class="container">
      <button class="navbar-toggler tab-toggler collapsed" type="button" data-toggle="collapse" data-target="#tabMenu" aria-controls="tabMenu" aria-expanded="false" aria-label="Toggle navigation">
      Active Text
    </button>
      <div class="collapse navbar-collapse tab-collapse" id="tabMenu">
        <nav class="navbar-nav nav nav-pills nav-fill flex-column flex-lg-row flex-md-row" id="myTab" role="tablist">
          <a class="nav-item nav-link active" id="tab-one-label" data-toggle="tab" href="#tab-one" role="tab" aria-controls="nav-one" aria-selected="true">Section One</a>
          <a class="nav-item nav-link" id="tab-two-label" data-toggle="tab" href="#tab-two" role="tab" aria-controls="nav-two" aria-selected="false">Section Two</a>
          <a class="nav-item nav-link" id="tab-three-label" data-toggle="tab" href="#tab-three" role="tab" aria-controls="nav-three" aria-selected="false">Section Three</a>
        </nav>
      </div>
    </div>
  </nav>

<!-- Tab Content -->

<div class="tab-content" id="nav-tabContent">
<!-- Tab Section 1 -->
 <div class="tab-pane fade show active pt-5" id="tab-one" role="tabpanel" aria-labelledby="tab-one-label">
          <h3>Section One</h3>
          <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
        </div>
<!-- Tab Section 2 -->
 <div class="tab-pane fade pt-5" id="tab-two" role="tabpanel" aria-labelledby="tab-two-label">
          <h3>Section Two</h3>
          <p> Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
        </div>
<!-- Tab Section 3 -->
 <div class="tab-pane fade pt-5" id="tab-three" role="tabpanel" aria-labelledby="tab-three-label">
          <h3>Section Three</h3>
          <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </p>
        </div>
  </div>