GNWT Base Theme Style Guide

5.7.1 navigation.tabs.stacked Tabs (stacked)

Toggle example guides Toggle HTML markup

When the secondary tabs appear directly after the primary tabs, the styling is slightly different.

Example
Markup: navigation/tabs/tabs--stacked.twig 
<ul class="tabs">
  <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
</ul>
<ul class="tabs tabs--secondary">
  <li class="tabs__tab is-active"><a href="#" class="tabs__tab-link is-active">View <span class="visually-hidden">(active tab)</span></a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Edit</a></li>
  <li class="tabs__tab"><a href="#" class="tabs__tab-link">Revisions</a></li>
</ul>
Source: sass/navigation/tabs/_tabs.scss, line 14