> 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 in your webpage made easy with NxetGenCSS

## 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="https://2921085085-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg5nbtYYIYcbVnZhdfLY2%2Fuploads%2Fp978huumejqtae9t1UBH%2FScreenshot%202024-01-17%20163817.png?alt=media&amp;token=4175fa11-9506-47fb-b66c-2df8c453168b" alt=""><figcaption><p>On Monitors or big devices</p></figcaption></figure>

<figure><img src="https://2921085085-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fg5nbtYYIYcbVnZhdfLY2%2Fuploads%2Fq3yp0khPuySZmUnq9QyL%2FScreenshot%202024-01-17%20163850.png?alt=media&amp;token=e106190e-1c80-421c-a42e-ed0043d4eb86" alt=""><figcaption><p>On small devices like smart phones etc.</p></figcaption></figure>