Tabs

Tabs provide tab-shaped buttons for administration of pages on Drupal sites. These are only visible to site editors/admins and provide key actions that can be performed on a page for editing purposes.

Examples and Code

Select exampleDefault

Open Full Example

<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>

Guidance

Usage Guidance

• Use for administrative tabs on pages and applications
• Don’t use for end-user facing content