Check out BugBytes overview of labb
UI

Search

Search features are coming soon!

Navbar

<c-lb.navbar /> Markdown

Navbar component for Django: build responsive top navigation bars with menus and branding. Built with django-cotton, Tailwind CSS, and daisyUI 5.

Navbar renders a top bar with start, center, and end layout slots. Use it for site-wide navigation with a brand logo, main links, and utility actions like search or user avatar.

Basic Navbar

<div class="w-full">
    <c-lb.navbar class="bg-base-100 border border-base-200 rounded-box">
        <c-lb.navbar.start>
            <c-lb.button btnStyle="ghost" size="sm">
                <c-lbi n="rmx.apps" w="1em" h="1em" />
                Brand
            </c-lb.button>
        </c-lb.navbar.start>
        <c-lb.navbar.center class="hidden lg:flex">
            <c-lb.button btnStyle="ghost" size="sm">
                <c-lbi n="rmx.home" w="1em" h="1em" />
                Home
            </c-lb.button>
            <c-lb.button btnStyle="ghost" size="sm">
                <c-lbi n="rmx.info-i" w="1em" h="1em" />
                About
            </c-lb.button>
            <c-lb.button btnStyle="ghost" size="sm">
                <c-lbi n="rmx.mail" w="1em" h="1em" />
                Contact
            </c-lb.button>
        </c-lb.navbar.center>
        <c-lb.navbar.end>
            <c-lb.button btnStyle="ghost" size="sm" class="lg:hidden">
                <c-lbi n="rmx.menu" w="1em" h="1em" />
                Menu
            </c-lb.button>
            <c-lb.button btnStyle="ghost" size="sm" class="hidden lg:flex">
                <c-lbi n="rmx.login-box" w="1em" h="1em" />
                Login
            </c-lb.button>
        </c-lb.navbar.end>
    </c-lb.navbar>
</div>

With Brand and Menu

<div class="w-full">
    <c-lb.navbar class="bg-base-100 border border-base-200 rounded-box">
        <c-lb.navbar.start>
            <c-lb.button btnStyle="ghost" size="lg">
                <c-lbi n="rmx.apps" w="1em" h="1em" />
                My App
            </c-lb.button>
        </c-lb.navbar.start>
        <c-lb.navbar.center class="hidden lg:flex">
            <c-lb.menu direction="horizontal">
                <c-lb.menu.item href="/" title="Home">
                    <c-lbi n="rmx.home" w="1em" h="1em" />
                    Home
                </c-lb.menu.item>
                <c-lb.menu.item href="/about" title="About">
                    <c-lbi n="rmx.info-i" w="1em" h="1em" />
                    About
                </c-lb.menu.item>
            </c-lb.menu>
        </c-lb.navbar.center>
        <c-lb.navbar.end>
            <c-lb.button btnStyle="ghost" size="sm" class="lg:hidden">
                <c-lbi n="rmx.menu" w="1em" h="1em" />
                Menu
            </c-lb.button>
            <c-lb.button variant="primary" size="sm" class="hidden lg:flex">
                <c-lbi n="rmx.rocket" w="1em" h="1em" />
                Get Started
            </c-lb.button>
        </c-lb.navbar.end>
    </c-lb.navbar>
</div>

Centered Layout

<div class="w-full">
    <c-lb.navbar class="bg-base-100 border border-base-200 rounded-box">
        <c-lb.navbar.start>
            <c-lb.button btnStyle="ghost" size="sm" class="lg:hidden">Menu</c-lb.button>
        </c-lb.navbar.start>
        <c-lb.navbar.center>
            <c-lb.button btnStyle="ghost" size="lg" class="hidden lg:flex">Brand</c-lb.button>
            <c-lb.button btnStyle="ghost" size="sm" class="hidden lg:flex">Home</c-lb.button>
            <c-lb.button btnStyle="ghost" size="sm" class="hidden lg:flex">About</c-lb.button>
            <c-lb.button btnStyle="ghost" size="sm" class="hidden lg:flex">Contact</c-lb.button>
            <c-lb.button btnStyle="ghost" size="lg" class="lg:hidden">Brand</c-lb.button>
        </c-lb.navbar.center>
        <c-lb.navbar.end>
        </c-lb.navbar.end>
    </c-lb.navbar>
</div>

With Dropdown

<div class="w-full">
    <c-lb.navbar class="bg-base-100 border border-base-200 rounded-box">
        <c-lb.navbar.start>
            <c-lb.button btnStyle="ghost" size="lg">
                <c-lbi n="rmx.apps" w="1em" h="1em" />
                My App
            </c-lb.button>
        </c-lb.navbar.start>
        <c-lb.navbar.center class="hidden lg:flex">
            <c-lb.menu direction="horizontal">
                <c-lb.menu.item href="/" title="Home">
                    <c-lbi n="rmx.home" w="1em" h="1em" />
                    Home
                </c-lb.menu.item>
                <c-lb.menu.item type="submenu-details" title="Services">

                    <c-lb.menu.item href="/web-design" title="Web Design">
                        <c-lbi n="rmx.palette" w="1em" h="1em" />
                        Web Design
                    </c-lb.menu.item>
                    <c-lb.menu.item href="/development" title="Development">
                        <c-lbi n="rmx.code" w="1em" h="1em" />
                        Development
                    </c-lb.menu.item>
                    <c-lb.menu.item href="/consulting" title="Consulting">
                        <c-lbi n="rmx.group" w="1em" h="1em" />
                        Consulting
                    </c-lb.menu.item>
                </c-lb.menu.item>
            </c-lb.menu>
        </c-lb.navbar.center>
        <c-lb.navbar.end>
            <c-lb.dropdown alignment="end" placement="bottom">
                <c-lb.dropdown.trigger>
                    <c-lb.button btnStyle="ghost" size="sm" tabindex="0">
                        <c-lbi n="rmx.user" w="1em" h="1em" />
                            User Menu
                    </c-lb.button>
                </c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 border border-base-200 w-48">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item href="/profile" title="Profile">
                            <c-lbi n="rmx.user" w="1em" h="1em" />
                            Profile
                        </c-lb.menu.item>
                        <c-lb.menu.item href="/settings" title="Settings">
                            <c-lbi n="rmx.settings" w="1em" h="1em" />
                            Settings
                        </c-lb.menu.item>
                        <c-lb.menu.item href="/logout" title="Logout">
                            <c-lbi n="rmx.logout-box" w="1em" h="1em" />
                            Logout
                        </c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>
        </c-lb.navbar.end>
    </c-lb.navbar>
</div>

Responsive Navbar

<div class="w-full">
    <c-lb.navbar class="bg-base-100 border border-base-200 rounded-box">
        <c-lb.navbar.start>
            <c-lb.button btnStyle="ghost" size="lg">
                <c-lbi n="rmx.apps" w="1em" h="1em" />
                My App
            </c-lb.button>
        </c-lb.navbar.start>
        <c-lb.navbar.center class="hidden lg:flex">
            <c-lb.menu direction="horizontal">
                <c-lb.menu.item href="/" title="Home">
                    <c-lbi n="rmx.home" w="1em" h="1em" />
                    Home
                </c-lb.menu.item>
                <c-lb.menu.item href="/about" title="About">
                    <c-lbi n="rmx.info-i" w="1em" h="1em" />
                    About
                </c-lb.menu.item>
            </c-lb.menu>
        </c-lb.navbar.center>
        <c-lb.navbar.end>
            <c-lb.dropdown class="lg:hidden" alignment="end">
                <c-lb.dropdown.trigger>
                    <c-lb.button btnStyle="ghost" size="sm">
                        <c-lbi n="rmx.menu" w="1em" h="1em" />
                        Menu
                    </c-lb.button>
                </c-lb.dropdown.trigger>
                <c-lb.dropdown.content class="bg-base-100 border border-base-200 w-48">
                    <c-lb.menu class="w-full">
                        <c-lb.menu.item href="/" title="Home">
                            <c-lbi n="rmx.home" w="1em" h="1em" />
                            Home
                        </c-lb.menu.item>
                        <c-lb.menu.item href="/about" title="About">
                            <c-lbi n="rmx.info-i" w="1em" h="1em" />
                            About
                        </c-lb.menu.item>
                    </c-lb.menu>
                </c-lb.dropdown.content>
            </c-lb.dropdown>
            <c-lb.button variant="primary" size="sm" class="hidden lg:flex">
                <c-lbi n="rmx.rocket" w="1em" h="1em" />
                Get Started
            </c-lb.button>
        </c-lb.navbar.end>
    </c-lb.navbar>
</div>

<div class="w-full">
    <c-lb.navbar class="bg-base-100 border border-base-200 rounded-box">
        <c-lb.navbar.start>
            <c-lb.button btnStyle="ghost" size="lg">Brand</c-lb.button>
            <c-lb.button btnStyle="ghost" size="sm" class="hidden lg:flex">Home</c-lb.button>
            <c-lb.button btnStyle="ghost" size="sm" class="hidden lg:flex">About</c-lb.button>
        </c-lb.navbar.start>
        <c-lb.navbar.center>
        </c-lb.navbar.center>
        <c-lb.navbar.end>
            <c-lb.button btnStyle="ghost" size="sm" class="lg:hidden">Menu</c-lb.button>
        </c-lb.navbar.end>
    </c-lb.navbar>
</div>

<div class="w-full">
    <c-lb.navbar class="bg-base-100 border border-base-200 rounded-box">
        <c-lb.navbar.start>
            <c-lb.button btnStyle="ghost" size="sm" class="lg:hidden">Menu</c-lb.button>
        </c-lb.navbar.start>
        <c-lb.navbar.center>
            <c-lb.button btnStyle="ghost" size="sm" class="hidden lg:flex">Home</c-lb.button>
            <c-lb.button btnStyle="ghost" size="sm" class="hidden lg:flex">About</c-lb.button>
            <c-lb.button btnStyle="ghost" size="sm" class="hidden lg:flex">Services</c-lb.button>
            <c-lb.button btnStyle="ghost" size="sm" class="hidden lg:flex">Contact</c-lb.button>
        </c-lb.navbar.center>
        <c-lb.navbar.end>
        </c-lb.navbar.end>
    </c-lb.navbar>
</div>

<div class="w-full">
    <c-lb.navbar class="bg-base-100 border border-base-200 rounded-box">
        <c-lb.navbar.start>
            <c-lb.button btnStyle="ghost" size="sm" class="lg:hidden">Menu</c-lb.button>
        </c-lb.navbar.start>
        <c-lb.navbar.center>
        </c-lb.navbar.center>
        <c-lb.navbar.end>
            <c-lb.button btnStyle="ghost" size="sm" class="hidden lg:flex">Login</c-lb.button>
            <c-lb.button variant="primary" size="sm" class="hidden lg:flex">Sign Up</c-lb.button>
            <c-lb.button btnStyle="ghost" size="sm" class="hidden lg:flex">Settings</c-lb.button>
        </c-lb.navbar.end>
    </c-lb.navbar>
</div>

API Reference

c-lb.navbar

Property Type Default Required Description
class string - No Additional CSS classes to apply
as
div nav header
div No HTML tag to use for the navbar container

c-lb.navbar.start

Property Type Default Required Description
class string - No Additional CSS classes to apply
as
div section aside
div No HTML tag to use for the navbar start section

c-lb.navbar.center

Property Type Default Required Description
class string - No Additional CSS classes to apply
as
div section nav
div No HTML tag to use for the navbar center section

c-lb.navbar.end

Property Type Default Required Description
class string - No Additional CSS classes to apply
as
div section aside
div No HTML tag to use for the navbar end section
Prev Menu
Next Pagination