Navigation

Navivgation is a set of buttons or images in a row or column that serves as a control point to link the user to different sections on a website.

Examples

                   
<nav
style="position: relative; z-index: 0"
class="top-nav flex align-items-center justify-between bg-grey-800"
>
<input id="top-nav-toggle" type="checkbox" />
<a
  href="../index.html"
  class="text-white flex align-items-center gap-2"
>
  <span class="fas fa-code text-2xl"></span>
  <h2 class="text-xl">
    <span class="text-indigo-400 text-3xl">FUSION</span>CSS
  </h2>
</a>

<ul class="links gap-10">
  <li>
    <a
      class="text-white text-hover-indigo-400 flex justify-center align-items-center text-lg"
      href="/pages/docs.html"
    >
      <i class="fa-solid fa-file-lines mr-2"></i>
      Documentation
    </a>
  </li>

  <li>
    <a
      class="text-white text-hover-indigo-400 flex justify-center align-items-center text-lg"
      href="https://github.com/Ananyamadhu08/fusion"
      target="_blank"
    >
      <i class="fab fa-github mr-2"></i>
      Github
    </a>
  </li>
</ul>

<label for="top-nav-toggle" class="icon-burger">
  <div class="line bg-white"></div>
  <div class="line bg-white"></div>
  <div class="line bg-white"></div>
</label>
</nav>
                   
                

                
<button class="btn btn-square-solid bg-indigo-400" onclick="openNav()">
  open sidenav
</button>
                
             

                
/* Set the width of the side navigation to 250px */
const openNav = () => {
  document.getElementById("side-navbar").style.width = "250px";
};
/* Set the width of the side navigation to 0 */
const closeNav = () => {
  document.getElementById("side-navbar").style.width = "0";
};