Tabs

html : Tabs sample

<ul className="tabs" role="tablist">
  <li role="tab" aria-controls="section-1" id="section-1__tab" className="tabs__item">
    Tabs item
  </li>
  <li role="tab" aria-controls="section-2" aria-selected="true" id="section-2__tab" className="tabs__item tabs__item--active">
    Active Tabs item
  </li>
  <li role="tab" aria-controls="section-3" id="section-3__tab" className="tabs__item">
    Tabs item
  </li>
</ul>
<div class="tabs-content">
  <section id="section-1" role="tabpanel" aria-hidden="true" aria-labelledby="section-1__tab">...</section>
  <section id="section-2" role="tabpanel" aria-hidden="false" aria-labelledby="section-2__tab">...</section>
  <section id="section-3" role="tabpanel" aria-hidden="true" aria-labelledby="section-3__tab">...</section>
</div>
...
<!-- Small tabs -->
<ul className="tabs" role="tablist">
  <li role="tab" aria-controls="section-1" id="section-1__tab" className="tabs__item tabs__item--small">
    Tabs item
  </li>
  ...
</ul>

When to use tabs

Tabs, when used correctly, are useful for alternating between mutually exclusive views within the same content. Generally speaking, they should not be used to navigate between different areas of a site or application. They should only be used when it is not necessary to see content from multiple tabs at the same time.

One key strength of tabbed interfaces is their ability to visually tie the section button to its content, by appearing "attached". While in many cases a navigation menu could suffice for the same purpose, consider using tabs when it is especially important to help users alternate easily and rapidly between parallel sections.