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
Reference: https://picturepan2.github.io/spectre/components/nav.html
Last Updated :
21 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...