Tab Navigation
Use case & documentation
- Tabs are never hidden on mobile screens.
- On smaller viewports the tabs will wrap to another line to maximize space.
- On smaller viewports the tab component will occupy the entire horizontal space of its surrounding div (full width).
- Use this component for a maximum of 5-7 tabs. If you have more tabs or sub-navigation, consider side bar navigation.
Example
Tab 1 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Faucibus turpis in eu mi bibendum. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Eget aliquet nibh praesent tristique magna sit amet purus gravida. Ut aliquam purus sit amet luctus venenatis lectus. Sagittis nisl rhoncus mattis rhoncus urna neque viverra justo. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Arcu risus quis varius quam quisque id diam vel. Vestibulum lectus mauris ultrices eros.
Tab 2 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Sit amet facilisis magna etiam tempor. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Eget aliquet nibh praesent tristique magna sit amet purus gravida.
Placerat duis ultricies lacus sed turpis tincidunt id aliquet. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Pellentesque habitant morbi tristique senectus et netus et. Nunc congue nisi vitae suscipit tellus mauris a diam maecenas. Nunc aliquet bibendum enim facilisis. Pulvinar neque laoreet suspendisse interdum consectetur libero. Purus viverra accumsan in nisl nisi scelerisque.
Tab 3 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Sit amet facilisis magna etiam tempor. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Eget aliquet nibh praesent tristique magna sit amet purus gravida.
Tab 4 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Sit amet facilisis magna etiam tempor. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Eget aliquet nibh praesent tristique magna sit amet purus gravida.
Tab 5 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Sit amet facilisis magna etiam tempor. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Eget aliquet nibh praesent tristique magna sit amet purus gravida.
Tab 6 Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet nulla malesuada pellentesque elit eget. Sit amet facilisis magna etiam tempor. Amet nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Eget aliquet nibh praesent tristique magna sit amet purus gravida.
<div class="group py-2">
<ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="tab1-tab"
data-bs-toggle="tab"
data-bs-target="#tab1"
type="button"
role="tab"
aria-controls="tab1"
aria-selected="true">
Tab 1
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="tab2-tab"
data-bs-toggle="tab"
data-bs-target="#tab2"
type="button"
role="tab"
aria-controls="tab2"
aria-selected="false">
Tab 2
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="tab3-tab"
data-bs-toggle="tab"
data-bs-target="#tab3"
type="button"
role="tab"
aria-controls="tab3"
aria-selected="false">
Tab 3
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="tab4-tab"
data-bs-toggle="tab"
data-bs-target="#tab4"
type="button"
role="tab"
aria-controls="tab4"
aria-selected="false">
Tab 4
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="tab5-tab"
data-bs-toggle="tab"
data-bs-target="#tab5"
type="button"
role="tab"
aria-controls="tab5"
aria-selected="false">
Tab 5
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="tab6-tab"
data-bs-toggle="tab"
data-bs-target="#tab6"
type="button"
role="tab"
aria-controls="tab6"
aria-selected="false">
Tab 6
</button>
</li>
</ul>
<div class="tab-content p-3 rounded" id="myTabContent">
<div
class="tab-pane fade show active"
id="tab1"
role="tabpanel"
aria-labelledby="home-tab">
<h4>Tab 1 Content</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Faucibus turpis in
eu mi bibendum. Sed euismod nisi porta lorem mollis aliquam ut porttitor
leo. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Eget
aliquet nibh praesent tristique magna sit amet purus gravida. Ut aliquam
purus sit amet luctus venenatis lectus. Sagittis nisl rhoncus mattis
rhoncus urna neque viverra justo. Faucibus scelerisque eleifend donec
pretium vulputate sapien nec. Arcu risus quis varius quam quisque id
diam vel. Vestibulum lectus mauris ultrices eros.
</p>
</div>
<div
class="tab-pane fade"
id="tab2"
role="tabpanel"
aria-labelledby="profile-tab">
<h4>Tab 2 Content</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet
nulla malesuada pellentesque elit eget. Sit amet facilisis magna etiam
tempor. Amet nisl suscipit adipiscing bibendum est ultricies integer
quis auctor. Eget aliquet nibh praesent tristique magna sit amet purus
gravida.
</p>
<p>
Placerat duis ultricies lacus sed turpis tincidunt id aliquet.
Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt.
Pellentesque habitant morbi tristique senectus et netus et. Nunc congue
nisi vitae suscipit tellus mauris a diam maecenas. Nunc aliquet bibendum
enim facilisis. Pulvinar neque laoreet suspendisse interdum consectetur
libero. Purus viverra accumsan in nisl nisi scelerisque.
</p>
</div>
<div
class="tab-pane fade"
id="tab3"
role="tabpanel"
aria-labelledby="contact-tab">
<h3>Tab 3 Content</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet
nulla malesuada pellentesque elit eget. Sit amet facilisis magna etiam
tempor. Amet nisl suscipit adipiscing bibendum est ultricies integer
quis auctor. Eget aliquet nibh praesent tristique magna sit amet purus
gravida.
</p>
</div>
<div
class="tab-pane fade"
id="tab4"
role="tabpanel"
aria-labelledby="contact-tab">
<h4>Tab 4 Content</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet
nulla malesuada pellentesque elit eget. Sit amet facilisis magna etiam
tempor. Amet nisl suscipit adipiscing bibendum est ultricies integer
quis auctor. Eget aliquet nibh praesent tristique magna sit amet purus
gravida.
</p>
</div>
<div
class="tab-pane fade"
id="tab5"
role="tabpanel"
aria-labelledby="contact-tab">
<h4>Tab 5 Content</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet
nulla malesuada pellentesque elit eget. Sit amet facilisis magna etiam
tempor. Amet nisl suscipit adipiscing bibendum est ultricies integer
quis auctor. Eget aliquet nibh praesent tristique magna sit amet purus
gravida.
</p>
</div>
<div
class="tab-pane fade"
id="tab6"
role="tabpanel"
aria-labelledby="contact-tab">
<h4>Tab 6 Content</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Tempus imperdiet
nulla malesuada pellentesque elit eget. Sit amet facilisis magna etiam
tempor. Amet nisl suscipit adipiscing bibendum est ultricies integer
quis auctor. Eget aliquet nibh praesent tristique magna sit amet purus
gravida.
</p>
</div>
</div>
</div>
`
}