Check out BugBytes overview of labb
UI

Search

Search features are coming soon!

Menu

<c-lb.menu /> Markdown

Menu component for Django: build navigation menus, sidebars, and dropdown lists. Built with django-cotton, Tailwind CSS, and daisyUI 5.

Menu renders a styled list of navigation items using daisyUI's menu layout. Use it for sidebars, dropdown contents, or any vertical link list. The horizontal prop switches to a row layout.

Basic Menu

<c-lb.menu class="bg-base-100 rounded-box w-64 shadow">
    <c-lb.menu.item href="#" title="Home" />
    <c-lb.menu.item href="#" title="About" />
    <c-lb.menu.item href="#" title="Services" />
    <c-lb.menu.item href="#" title="Contact" />
</c-lb.menu>

Horizontal Menu

<c-lb.menu direction="horizontal" class="bg-base-100 rounded-box w-full shadow">
    <c-lb.menu.item href="#" title="Home" />
    <c-lb.menu.item href="#" title="About" />
    <c-lb.menu.item href="#" title="Services" />
    <c-lb.menu.item href="#" title="Contact" />
</c-lb.menu>

Extra Small (xs)

Small (sm)

Medium (md) - Default

Large (lg)

<div class="space-y-4">
    <div>
        <h3 class="text-sm font-medium mb-2">Extra Small (xs)</h3>
        <c-lb.menu size="xs" class="bg-base-100 rounded-box w-48 shadow">
            <c-lb.menu.item href="#" title="Home" />
            <c-lb.menu.item href="#" title="About" />
        </c-lb.menu>
    </div>

    <div>
        <h3 class="text-sm font-medium mb-2">Small (sm)</h3>
        <c-lb.menu size="sm" class="bg-base-100 rounded-box w-56 shadow">
            <c-lb.menu.item href="#" title="Home" />
            <c-lb.menu.item href="#" title="About" />
        </c-lb.menu>
    </div>

    <div>
        <h3 class="text-sm font-medium mb-2">Medium (md) - Default</h3>
        <c-lb.menu size="md" class="bg-base-100 rounded-box w-64 shadow">
            <c-lb.menu.item href="#" title="Home" />
            <c-lb.menu.item href="#" title="About" />
        </c-lb.menu>
    </div>

    <div>
        <h3 class="text-sm font-medium mb-2">Large (lg)</h3>
        <c-lb.menu size="lg" class="bg-base-100 rounded-box w-72 shadow">
            <c-lb.menu.item href="#" title="Home" />
            <c-lb.menu.item href="#" title="About" />
        </c-lb.menu>
    </div>
</div>

Basic Menu Item

<c-lb.menu class="bg-base-100 rounded-box w-64 shadow">
    <c-lb.menu.item href="#" title="Home" />
    <c-lb.menu.item href="#" title="About" />
    <c-lb.menu.item href="#" title="Services" />
    <c-lb.menu.item href="#" title="Contact" />
</c-lb.menu>

Active Menu Item

<c-lb.menu class="bg-base-100 rounded-box w-64 shadow">
    <c-lb.menu.item href="#" title="Home" active />
    <c-lb.menu.item href="#" title="About" />
    <c-lb.menu.item href="#" title="Services" />
    <c-lb.menu.item href="#" title="Contact" />
</c-lb.menu>

Disabled Menu Item

<c-lb.menu class="bg-base-100 rounded-box w-64 shadow">
    <c-lb.menu.item href="#" title="Home" />
    <c-lb.menu.item href="#" title="About" />
    <c-lb.menu.item href="#" title="Services" disabled />
    <c-lb.menu.item href="#" title="Contact" />
</c-lb.menu>

<c-lb.menu class="bg-base-100 rounded-box w-64 shadow">
    <c-lb.menu.item type="title" title="Navigation" />
    <c-lb.menu.item href="#" title="Home" />
    <c-lb.menu.item href="#" title="About" />

    <c-lb.menu.item type="title" title="Account" />
    <c-lb.menu.item href="#" title="Profile" />
    <c-lb.menu.item href="#" title="Settings" />
    <c-lb.menu.item href="#" title="Logout" />
</c-lb.menu>

Details Submenu

<c-lb.menu class="bg-base-100 rounded-box w-64 shadow">
    <c-lb.menu.item href="#" title="Home" />
    <c-lb.menu.item href="#" title="About" />
    <c-lb.menu.item type="submenu-details" title="Services">
        <c-lb.menu.item href="#" title="Web Design" />
        <c-lb.menu.item href="#" title="Development" />
        <c-lb.menu.item href="#" title="Consulting" />
    </c-lb.menu.item>
    <c-lb.menu.item href="#" title="Contact" />
</c-lb.menu>

Toggle Submenu

Note: This example requires JavaScript to function properly. The JavaScript handles the toggle functionality for the menu-dropdown-show class.

<c-lb.menu class="bg-base-100 rounded-box w-64 shadow">
    <c-lb.menu.item href="#" title="Home" />
    <c-lb.menu.item href="#" title="About" />
    <c-lb.menu.item type="submenu-toggle" title="Services">
        <c-lb.menu.item href="#" title="Web Design" />
        <c-lb.menu.item href="#" title="Development" />
        <c-lb.menu.item href="#" title="Consulting" />
    </c-lb.menu.item>
    <c-lb.menu.item href="#" title="Contact" />
</c-lb.menu>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle menu dropdown toggle functionality
    const menuDropdownToggles = document.querySelectorAll('.menu-dropdown-toggle');

    menuDropdownToggles.forEach(toggle => {
        toggle.addEventListener('click', function(e) {
            e.preventDefault();

            // Find the associated dropdown menu
            const dropdown = this.nextElementSibling;
            if (dropdown && dropdown.classList.contains('menu-dropdown')) {
                // Toggle the show class
                dropdown.classList.toggle('menu-dropdown-show');

                // Optional: Close other open dropdowns
                const allDropdowns = document.querySelectorAll('.menu-dropdown');
                allDropdowns.forEach(otherDropdown => {
                    if (otherDropdown !== dropdown) {
                        otherDropdown.classList.remove('menu-dropdown-show');
                    }
                });
            }
        });
    });

    // Close dropdowns when clicking outside
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.menu-dropdown-toggle') && !e.target.closest('.menu-dropdown')) {
            const allDropdowns = document.querySelectorAll('.menu-dropdown');
            allDropdowns.forEach(dropdown => {
                dropdown.classList.remove('menu-dropdown-show');
            });
        }
    });
});
</script>

Nested Submenus

<c-lb.menu class="bg-base-100 rounded-box w-64 shadow">
    <c-lb.menu.item href="#" title="Home" />
    <c-lb.menu.item href="#" title="About" />
    <c-lb.menu.item type="submenu-details" title="Services">
        <c-lb.menu.item href="#" title="Web Design" />
        <c-lb.menu.item href="#" title="Development" />
        <c-lb.menu.item type="submenu-details" title="Consulting">
            <c-lb.menu.item href="#" title="Strategy" />
            <c-lb.menu.item href="#" title="Implementation" />
            <c-lb.menu.item href="#" title="Support" />
        </c-lb.menu.item>
    </c-lb.menu.item>
    <c-lb.menu.item href="#" title="Contact" />
</c-lb.menu>

Disabled Submenu Items

<c-lb.menu class="bg-base-100 rounded-box w-64 shadow">
    <c-lb.menu.item href="#" title="Home" />
    <c-lb.menu.item href="#" title="About" />
    <c-lb.menu.item type="submenu-details" title="Services" disabled open>
        <c-lb.menu.item href="#" title="Web Design" />
        <c-lb.menu.item href="#" title="Development" />
        <c-lb.menu.item href="#" title="Consulting" />
    </c-lb.menu.item>
    <c-lb.menu.item href="#" title="Contact" />
</c-lb.menu>

<c-lb.menu class="bg-base-100 rounded-box w-64 shadow">
    <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="#" title="About">
        <c-lbi n="rmx.info-i" w="1em" h="1em" />
        About
    </c-lb.menu.item>
    <c-lb.menu.item type="submenu-details" title="Services">
        <c-slot name="titleSlot">
            <summary>
                <c-lbi n="rmx.settings" w="1em" h="1em" />
                Services
            </summary>
        </c-slot>
        <c-lb.menu.item href="#" title="Web Design">
            <c-lbi n="rmx.palette" w="1em" h="1em" />
            Web Design
        </c-lb.menu.item>
        <c-lb.menu.item href="#" title="Development">
            <c-lbi n="rmx.code" w="1em" h="1em" />
            Development
        </c-lb.menu.item>
        <c-lb.menu.item href="#" title="Consulting">
            <c-lbi n="rmx.group" w="1em" h="1em" />
            Consulting
        </c-lb.menu.item>
    </c-lb.menu.item>
    <c-lb.menu.item href="#" title="Contact">
        <c-lbi n="rmx.mail" w="1em" h="1em" />
        Contact
    </c-lb.menu.item>
</c-lb.menu>

API Reference

c-lb.menu

Property Type Default Required Description
class string - No Additional CSS classes to apply
direction
vertical horizontal
vertical No Menu direction - vertical (default) or horizontal
size
xs sm md lg xl
md No Menu size

c-lb.menu.item

Property Type Default Required Description
class string - No Additional CSS classes to apply
type
link title submenu-details submenu-toggle
link No Type of menu item
title string - No Text for the menu item (required for submenu types, alternative to slot for link/title types)
size
xs sm md lg xl
- No Menu item size
disabled boolean False No Whether the item is disabled
active boolean False No Whether the item appears active/selected
href string - No Link URL for link-type items
open boolean False No Whether submenu is initially open/expanded
Slot Name Description
default Default slot content for menu item
titleSlot Custom title slot for submenu items (overrides title attribute)
Prev Link
Next Navbar