Spectre Tabs

Spectre Tabs is used to create tabs for showing content on the page. It is a kind of routing to a different component without redirecting to a different page. Tabs allows quickly switch between different views. Tabs are the crucial component in Spectre, you can use icons, badge anything on tabs.

To create a tab you need to add a container element with the tab class. And add child elements with the tab-item class. You can add the tab-block class for a full-width tab. The tab-item or its child <a> with the active class will be highlighted.

Spectre Tabs Class:

tab: This class is used to create a tab component.
tab-item: This class is used to set the tab's item.
tab-block: This class is used to make the tab a full-width tab.

Syntax:

<ul class="tab tab-block">
    <li class="tab-item ">
            <a href="#">...</a>
    </li>
    ...
</ul>

The below example illustrates the Spectre Tabs:

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Tabs Class</strong>
        <br><br>
    </center>
    <strong>Normal Tabs:</strong>
    <ul class="tab tab-block">
      <li class="tab-item">
        <a href="#">HTML</a>
      </li>
      <li class="tab-item">
        <a href="#">CSS</a>
      </li>
      <li class="tab-item">
        <a href="#">JS</a>
      </li>
      <li class="tab-item">
        <a href="#" class="active">Spectre</a>
      </li>
    </ul>
    <br><br>
    <strong>Badge & Action Tabs:</strong>
    <ul class="tab tab-block">
      <li class="tab-item">
        <a href="#" class="badge" data-badge="9">
          Notification
        </a>
      </li>
      <li class="tab-item active">
        <a href="#">
          Music
        <i class="icon icon-cross"></i>
        </a>
      </li>
    </ul>
</body>

</html>

Output:

Reference: https://picturepan2.github.io/spectre/components/tabs.html

Explore