> For the complete documentation index, see [llms.txt](https://nextgencss.gitbook.io/untitled/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextgencss.gitbook.io/untitled/components/navbar.md).

# NavBar

## NavBar

* <mark style="color:yellow;background-color:yellow;">⚠Note:- There are still some bugs in NavBar , So use it on your own risk .</mark>

```html
<nav class="navbar bg-leaf mg-b-2">
    <div class="logo">Blog Name</div>
        <!-- NAVIGATION MENU -->
        <ul class="nav-links">
            <!-- USING CHECKBOX HACK -->
            <input type="checkbox" id="checkbox_toggle" />
            <!--Hamburger for navbar-->
            <label for="checkbox_toggle" class="hamburger">&#9776;</label> 
            <!-- NAVIGATION MENUS -->
            <div class="menu">
                <li><a href="/">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact</a></li>
            </div>
        </ul>
    </div>
</nav>
```

<figure><img src="/files/1dC1Gvnn3lAWIWZJTRyZ" alt=""><figcaption><p>On Monitors or big devices</p></figcaption></figure>

<figure><img src="/files/SuBShwk3TXyrvStYM6ga" alt=""><figcaption><p>On small devices like smart phones etc.</p></figcaption></figure>