Navigation

Navigation bar is used to navigate through the web apps or websites. This navigation component is responsive. It is a hamburger menu in medium and small devices

Argon CSS offers a responsive top navigation for desktop and side navigation.

Examples

                   
<header style="position: relative" class="docs-header">
    <nav class="topnav flex justify-between bg-grey-800">
        <input id="nav-toggle" class="invisible" type="checkbox" />
        <a class="text-white text-lg logo"><span class="text-lg text-cyan-500">Ar</span>gon</a>
        <ul class="links">
            <li>
                <a class="text-cyan-600 text-hover-cyan-400 text-lg mr-4" href="#home">Documentation</a>
            </li>
            <li>
                <a class="text-cyan-600 text-hover-cyan-400 flex justify-center align-items-center text-lg"
                    href="#about">
                    <i class="fab fa-github mr-2"></i>
                    Github
                </a>
            </li>
        </ul>
        <label for="nav-toggle" class="icon-burger">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </label>
    </nav>
</header>
                   
                

                   
<a class="btn m-10 btn-solid-amber shadow-lg text-white" onclick="openNav()">open sidebar
    nav</a>
<a class="btn m-10 btn-solid-rose shadow-lg text-white" onclick="openOffNav()">open sidebar nav
    (off-canvas)</a>
<a class="btn m-10 btn-solid-rose shadow-lg text-white" onclick="openFullNav()">open sidebar nav
    (full width)</a>

<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="text-white closebtn" onclick="closeOffNav()">×</a>
    <div class="nav overflow-scroll">
        <a href="#" class="block p-5 text-rose-500">About</a>
        <a href="#" class="block p-5 text-white">Services</a>
        <a href="#" class="block p-5 text-white">Clients</a>
        <a href="#" class="block p-5 text-white">Contact</a>
        <a href="#" class="block p-5 text-white">About</a>
        <a href="#" class="block p-5 text-white">Contact</a>
    </div>
</div> 
                   
                

javascript

                    
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Open the sidenav */
function openFullNav() {
  document.getElementById("mySidenav").style.width = "100%";
}

function openOffNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.body.style.marginLeft = "250px";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeOffNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.body.style.marginLeft = "0";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
 document.getElementById("mySidenav").style.width = "0";
}