Spectre Nav

The Spectre Nav is an important component used to create a tree view. This kind of component is required when we want to design content in a tree view. For adding a nav you need to add a container element with the nav class and then add child elements with the nav-item class. The nav-item with the active class will be highlighted.

Spectre Nav Class:

nav: This class is used to create the nav component.
nav-item: This class is used to create the nav items.

Syntax:

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

The below example illustrates the Spectre Nav:

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 Nav Class</strong>
    </center>
    <ul class="nav">
      <li class="nav-item">
        <a href="#">HTML</a>
      </li>
      <li class="nav-item">
        <a href="#">CSS</a>
        <ul class="nav">
          <li class="nav-item">
            <a href="#">Bootstrap</a>
          </li>
          <li class="nav-item">
            <a href="#">Tailwind</a>
          </li>
          <li class="nav-item">
            <a href="#">Semantic-UI</a>
          </li>
          <li class="nav-item">
            <a href="#">Pure CSS</a>
          </li>
          <li class="nav-item">
            <a href="#">Bulma</a>
          </li>
          <li class="nav-item active">
            <a href="#">Spectre</a>
          </li>
        </ul>
      </li>
      <li class="nav-item">
        <a href="#">JavaScript</a>
      </li>
      <li class="nav-item">
        <a href="#">PHP</a>
      </li>
    </ul>    
</body>

</html>

Output:

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

Explore