Open In App

Spectre Nav

Improve
Improve
Like Article
Like
Save
Share
Report

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

Spectre Nav

Spectre Nav

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



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