CSS HTML JavaScript
Clone or download
balzss Merge pull request #32 from Pautomagi/master
Add !default flag to variables to make them overridable.
Latest commit 2da0e1c May 31, 2017



Featherweight, Responsive, CSS Only Navigation bar


Try out all the options at the demo page!

Getting started

Get it with NPM:

npm install luxbar

Or with bower:

bower install luxbar

Or use the CDN:

<link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css">

Then head over to the demo page to generate your customized HTML code or use the one below as a base and see the docs for options. (Demo page is highly recommended for the newcomers)

<div class="luxbar luxbar-static">
    <input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox">
    <div class="luxbar-menu luxbar-menu-right luxbar-menu-dark">
        <ul class="luxbar-navigation">
            <li class="luxbar-header">
                <a class="luxbar-brand" href="#">Brand</a>
                <label class="luxbar-hamburger luxbar-hamburger-doublespin"
                        for="luxbar-checkbox"> <span></span> </label>
            <li class="luxbar-item active"><a href="#">Home</a></li>
            <li class="luxbar-item dropdown"><a href="#">Users</a>
                    <li class="luxbar-item" ><a href="#">Max</a></li>
                    <li class="luxbar-item" ><a href="#">Edgar</a></li>
                    <li class="luxbar-item" ><a href="#">John</a></li>


  • If you have any questions maybe it's already answered in the faq
  • If not then post your question to the issue page
  • If you found a bug or have a feature request post it there as well
  • You can message me directly at balazs.saros@gmail.com
  • Licensed under the MIT license