Tabs
Tabs allow users to quickly switch between different panels of content without the need to scroll or navigate to different pages. Tabs should only be used when users don’t need to see content from multiple tabs at the same time. Tabs should never be used to link to different pages or page sections. Tabs are a fluid-width component and expand to the size of their content and parent container.
Do
- Use short tab labels
- Make sure each tab contains unique content
- Order by importance from left to right
- Aim to have no more than 3 tabs to prevent wrapping on small screens and mobile devices
Don’t
- Nest tabs, accordions, or any other interactive components inside a tab
- Link tabs to separate pages
- Truncate tab labels
- Make tab labels ALL CAPS
- Put information users might want to compare behind different tabs
You'll need to include gnb-tabs-1.0.0.js for this component at the bottom of your page before the closing body tag.
Tabs
First tab
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis lacinia massa, ac suscipit risus rutrum sed. Nulla elementum a felis et sagittis. Nam sodales ex at dui porta pulvinar. Nunc sagittis magna nec lorem convallis tristique.
Second tab
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis lacinia massa, ac suscipit risus rutrum sed. Nulla elementum a felis et sagittis. Nam sodales ex at dui porta pulvinar. Nunc sagittis magna nec lorem convallis tristique. Quisque lobortis lacinia massa, ac suscipit risus rutrum sed. Nulla elementum a felis et sagittis. Nam sodales ex at dui porta pulvinar.
Nunc sagittis magna nec lorem convallis tristique.
Third tab
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lobortis lacinia massa, ac suscipit risus rutrum sed. Nulla elementum a felis et sagittis. Nam sodales ex at dui porta pulvinar.
HTML
<div class="gnb-tabs">
<nav>
<ul role="tablist">
<li>
<button class="tablinks active" onclick="openTab(event, 'first')">First</button>
</li>
<li>
<button class="tablinks" onclick="openTab(event, 'second')">Second</button>
</li>
<li>
<button class="tablinks" onclick="openTab(event, 'third')">Third</button>
</li>
</ul>
</nav>
<div id="first" class="tabcontent active" style="display: block;">
<h3>First tab</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipscing elit. Quistque lobortis lacinia massa, ac suscipit risus rutrum sed.
</p>
</div>
<div id="second" class="tabcontent">
<h3>Second tab</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipscing elit. Quistque lobortis lacinia massa, ac suscipit risus rutrum sed.
</p>
</div>
<div id="third" class="tabcontent">
<h3>Third tab</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipscing elit. Quistque lobortis lacinia massa, ac suscipit risus rutrum sed.
</p>
</div>
</div>
<!-- Add this at the bottom of your page before the closing body tag -->
<script src="gnb-tabs-1.0.0.js"></script>