Navigation

Navigation represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.

Navigation: Column

To use navigation: column you need to use the below code.

<nav class="nav-column flex-column">
<div class="nav-logo flex-row">
<img alt="Logo Image" class="nav-img"
 src="/Assets/helmet.png">
<div class="nav-title"><h1>Logo</h1></div>
</div>
<ul class="nav-links links-top flex-row">
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="#">Docs</a></li>
<li><a class="nav-link" href="#">GitHub</a></li>
</ul>
</nav>

Navigation: Row with Hamburger

To use Navigation: Row, you need to use the below code.

<nav class="nav-row flex-row">
<div class="nav-logo flex-row">
<button class="nav-button">
<img class="hamburger-img" src="/Assets/hamburger.png">
</button>
<img alt="Logo Image" class="nav-img"
 src="/Assets/helmet.png">
<div class="nav-title"><h1>Logo</h1></div>
</div>
<ul class="nav-links links-top flex-row">
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="#">Docs</a></li>
<li><a class="nav-link" href="#">GitHub</a></li>
</ul>
</nav>

JS Code for Hamburger functioning.

const toggle = () => {
if (sidebar.className == "sidebar") {
     sidebar.className = "sidebar-toggle";
     article.className = "flex-column article-toggle";
     clearInterval(intervalID);
} else {
     sidebar.className = "sidebar";
     article.className = "flex-column";
}
};
navBtn.addEventListener("click", toggle);

Note: In case you hadn't noticed, we've used the same navigation in the component library.

❮ Grid Snackbar ❯