Skip to Main Content

Pelican Design System icon Pelican Design System Tabbed Content

Tabbed Content

Tabs group related content, allowing users to see only what they want to see.

Edit on GitHub

On this page:

Best Practices

  • Tabbed content allows users to choose which content they want to see.
  • Use tabbed content to small bits of content at a time.
  • Rounded style tabs work better on small devices.
  • Tabs are for selective content display, not navigation.
  • You may need to put tabbed content into Layout Grid items.

Usage

Tabs

Tab 1

I am content in a tabbed content section.

Other content fits into here too. From rows and columns to paragraphs to forms.

Tab 2

I am content in a tabbed content section.

Other content fits into here too.

Tab 3

I am content in a tabbed content section.

Other content fits into here too.

<div class="content-container ">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <ul class="nav nav-tabs" id="tabset2" role="tablist">
          <li class="nav-item" role="presentation">
            <a role="tab" data-toggle="tab" data-bs-toggle="tab" aria-controls="Tab1TraditionalContent" aria-selected="true" class="nav-link active" href="#Tab1TraditionalContent">Active</a>
          </li>
          <li class="nav-item" role="presentation">
            <a role="tab" data-toggle="tab" data-bs-toggle="tab" aria-controls="Tab2TraditionalContent" aria-selected="false" class="nav-link" href="#Tab2TraditionalContent">Link</a>
          </li>
          <li class="nav-item" role="presentation">
            <a role="tab" data-toggle="tab" data-bs-toggle="tab" aria-controls="Tab3TraditionalContent" aria-selected="false" class="nav-link" href="#Tab3TraditionalContent">Link</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="tab-content mt-4">
    <div id="Tab1TraditionalContent" class="tab-pane fade show active" role="tabpanel">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <p class="h4 text-primary">
              Tab 1
            </p>
            <p class="lead">I am content in a tabbed content section.</p>
            <p>Other content fits into here too. From rows and columns to paragraphs to forms.</p>
          </div>
        </div>
      </div>
    </div>
    <div id="Tab2TraditionalContent" class="tab-pane fade" role="tabpanel">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <p class="h4 text-primary">
              Tab 2
            </p>
            <p class="lead">I am content in a tabbed content section.</p>
            <p>Other content fits into here too.</p>
          </div>
        </div>
      </div>
    </div>
    <div id="Tab3TraditionalContent" class="tab-pane fade" role="tabpanel">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <p class="h4 text-primary">
              Tab 3
            </p>
            <p class="lead">I am content in a tabbed content section.</p>
            <p>Other content fits into here too.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Button Tabs

Tab 1

I am content in a tabbed content section.

Other content fits into here too. From rows and columns to paragraphs to forms.

Tab 2

I am content in a tabbed content section.

Other content fits into here too.

Tab 3

I am content in a tabbed content section.

Other content fits into here too.

<div class="content-container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <ul class="nav nav-pills nav-pills-tabs mb-1" id="UserInfosTabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="Tab1Control" data-toggle="pill" data-bs-toggle="pill" href="#Tab1Content" role="tab" aria-controls="Tab1Content" aria-selected="true">
              Tab 1
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="Tab2Control" data-toggle="pill" data-bs-toggle="pill" href="#Tab2Content" role="tab" aria-controls="Tab2Content" aria-selected="false">
              Tab 2
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="Tab3Control" data-toggle="pill" data-bs-toggle="pill" href="#Tab3Content" role="tab" aria-controls="Tab3Content" aria-selected="false">
              Tab 3
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="tab-content mt-4">
    <div id="Tab1Content" class="tab-pane fade show active" role="tabpanel">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <p class="h4 text-primary">
              Tab 1
            </p>
            <p class="lead">I am content in a tabbed content section.</p>
            <p>Other content fits into here too. From rows and columns to paragraphs to forms.</p>
          </div>
        </div>
      </div>
    </div>
    <div id="Tab2Content" class="tab-pane fade" role="tabpanel">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <p class="h4 text-primary">
              Tab 2
            </p>
            <p class="lead">I am content in a tabbed content section.</p>
            <p>Other content fits into here too.</p>
          </div>
        </div>
      </div>
    </div>
    <div id="Tab3Content" class="tab-pane fade" role="tabpanel">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <p class="h4 text-primary">
              Tab 3
            </p>
            <p class="lead">I am content in a tabbed content section.</p>
            <p>Other content fits into here too.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Resources

Previous
Next
Page top