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:

Output:

👁 Spectre Nav

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