Open In App

Spectre Tabs

Improve
Improve
Like Article
Like
Save
Share
Report

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=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</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:

Spectre Tabs

Spectre Tabs

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



Last Updated : 21 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads