Navbar

Overview

Navbars provide primary navigation for your application. They display branding, navigation links, dropdown menus, and action buttons in a responsive bar that collapses to a hamburger menu on mobile devices. Domma's Navbar component supports light, dark, and transparent variants, along with fixed and sticky positioning.

Key Features

• Brand Section - Logo, text, and link to homepage
• Navigation Links - Primary navigation menu items
• Dropdown Menus - Nested navigation for complex sites
• Action Buttons - Call-to-action buttons on right side
• Mobile Responsive - Hamburger menu with collapse behaviour
• Theme Variants - Light, dark, and transparent styles
• Positioning - Static, fixed, or sticky positioning

When to Use Navbars

• Primary Navigation - Main site navigation header
• Application Header - Dashboard or admin panel navigation
• Landing Pages - Marketing site headers
• Documentation Sites - API or product documentation navigation

Basic Usage

<!-- HTML Container -->
<nav id="main-nav"></nav>

<!-- JavaScript Initialisation -->
<script>
const navbar = Domma.elements.navbar('#main-nav', {
    brand: {
        text: 'My App',
        logo: '/logo.svg',
        url: '/'
    },
    items: [
        { text: 'Home', url: '/', active: true },
        { text: 'About', url: '/about' },
        { text: 'Contact', url: '/contact' }
    ],
    variant: 'light',
    collapsible: true
});
</script>

Quick Start

Get started with Navbars in seconds. Here's the simplest implementation:

Basic Light Navbar

Simple navbar with brand and links:

<nav id="quick-start-navbar"></nav>

/**
 * Basic Light Navbar - from public/showcase/elements/navbar.
 */
export function mount(root) {
    const sampleItems = [
            {text: 'Home', url: '#', active: true},
            {text: 'Features', url: '#'},
            {text: 'Pricing', url: '#'}
        ];
        // Quick Start Examples
    E.navbar(root.querySelector('#quick-start-navbar'), {
            brand: {text: 'Domma'},
            items: sampleItems
        });
}

<nav id="navbar"></nav>

<script>
Domma.elements.navbar('#navbar', {
    brand: { text: 'Domma' },
    items: [
        { text: 'Home', url: '#', active: true },
        { text: 'Features', url: '#' },
        { text: 'Pricing', url: '#' }
    ]
});
</script>

With Action Button

Add a call-to-action button on the right:

<nav id="quick-start-action"></nav>

/**
 * With Action Button - from public/showcase/elements/navbar.
 */
export function mount(root) {
    E.navbar(root.querySelector('#quick-start-action'), {
        brand: {text: 'Domma'},
        items: [
            {text: 'Home', url: '#'},
            {text: 'Docs', url: '#'}
        ],
        actions: [
            {text: 'Sign Up', variant: 'primary', url: '#'}
        ]
    });
}

Domma.elements.navbar('#navbar', {
    brand: { text: 'Domma' },
    items: [
        { text: 'Home', url: '#' },
        { text: 'Docs', url: '#' }
    ],
    actions: [
        { text: 'Sign Up', variant: 'primary', url: '#' }
    ]
});

Step-by-Step Tutorial

Let's build a complete application navbar with branding, navigation links, a dropdown menu, and action buttons.

Step 1: Create the HTML Container

Start with a nav element:

<nav id="app-navbar"></nav>

Step 2: Add Brand and Basic Links

Initialise with brand and navigation items:

const appNav = Domma.elements.navbar('#app-navbar', {
    brand: {
        text: 'My SaaS App',
        logo: '/assets/logo.svg',
        url: '/'
    },
    items: [
        { text: 'Dashboard', url: '/dashboard', active: true },
        { text: 'Analytics', url: '/analytics' },
        { text: 'Settings', url: '/settings' }
    ]
});

Step 3: Add a Dropdown Menu

Create a nested dropdown for related items:

const appNav = Domma.elements.navbar('#app-navbar', {
    brand: { text: 'My SaaS App', url: '/' },
    items: [
        { text: 'Dashboard', url: '/dashboard', active: true },
        { text: 'Analytics', url: '/analytics' },
        {
            text: 'Resources',
            items: [  // Dropdown menu
                { text: 'Documentation', url: '/docs' },
                { text: 'API Reference', url: '/api' },
                { text: 'Support', url: '/support' }
            ]
        },
        { text: 'Settings', url: '/settings' }
    ]
});

Step 4: Add Action Buttons

Include call-to-action buttons on the right side:

const appNav = Domma.elements.navbar('#app-navbar', {
    brand: { text: 'My SaaS App', url: '/' },
    items: [...],
    actions: [
        { text: 'Upgrade', variant: 'outline', url: '/upgrade' },
        { text: 'Account', variant: 'primary', url: '/account' }
    ]
});

Step 5: Handle Navigation Clicks

Add click callback to handle navigation:

const appNav = Domma.elements.navbar('#app-navbar', {
    brand: { text: 'My SaaS App', url: '/' },
    items: [...],
    actions: [...],
    onItemClick: (item, index, event) => {
        event.preventDefault();
        console.log('Navigate to:', item.text, item.url);

        // Update active state
        appNav.setActive(index);

        // Custom navigation logic
        navigateToPage(item.url);
    }
});

Step 6: Complete Working Demo

Try the complete navbar with all features:

<nav id="tutorial-navbar"></nav>
<div class="p-4 mt-3 bg-surface rounded border">
    <strong>Navigation Log:</strong>
    <div id="tutorial-log" class="text-sm text-muted mt-2">Click navigation items above</div>
</div>

/**
 * Step 6: Complete Working Demo - from public/showcase/elements/navbar.
 */
export function mount(root) {
        // Tutorial Demo
    const tutorialNav = E.navbar(root.querySelector('#tutorial-navbar'), {
            brand: {text: 'My SaaS App', url: '#'},
            items: [
                {text: 'Dashboard', url: '/dashboard', active: true},
                {text: 'Analytics', url: '/analytics'},
                {
                    text: 'Resources',
                    items: [
                        {text: 'Documentation', url: '/docs'},
                        {text: 'API Reference', url: '/api'},
                        {text: 'Support', url: '/support'}
                    ]
                },
                {text: 'Settings', url: '/settings'}
            ],
            actions: [
                {text: 'Upgrade', variant: 'outline', url: '/upgrade'},
                {text: 'Account', variant: 'primary', url: '/account'}
            ],
            onItemClick: (item, index, event) => {
                event.preventDefault();
                const log = $(root).find('#tutorial-log')[0];
                const timestamp = D().format('HH:mm:ss');
                log.textContent = `[${timestamp}] Clicked: ${item.text} → ${item.url}`;
            }
        });
}

Examples & Variations

Theme Variants

Light, dark, and transparent navbar styles:

<div class="mb-4">
    <p class="text-sm font-semibold mb-2">Light Variant (Default):</p>
    <nav id="variant-light"></nav>
</div>
<div class="mb-4">
    <p class="text-sm font-semibold mb-2">Dark Variant:</p>
    <nav id="variant-dark"></nav>
</div>
<div class="p-6 bg-gradient-blue">
    <p class="text-sm font-semibold mb-2 text-white">Transparent Variant (on coloured background):</p>
    <nav id="variant-transparent"></nav>
</div>

/**
 * Theme Variants - from public/showcase/elements/navbar.
 */
export function mount(root) {
    const sampleItems = [
            {text: 'Home', url: '#', active: true},
            {text: 'Features', url: '#'},
            {text: 'Pricing', url: '#'}
        ];
        // Example 1: Variants
    E.navbar(root.querySelector('#variant-light'), {
            variant: 'light',
            brand: {text: 'Light App'},
            items: sampleItems
        });
    E.navbar(root.querySelector('#variant-dark'), {
            variant: 'dark',
            brand: {text: 'Dark App'},
            items: sampleItems
        });
    E.navbar(root.querySelector('#variant-transparent'), {
            variant: 'transparent',
            brand: {text: 'Transparent App'},
            items: sampleItems
        });
}

// Light variant (default)
Domma.elements.navbar('#nav', {
    variant: 'light',
    brand: { text: 'App' },
    items: [...]
});

// Dark variant
Domma.elements.navbar('#nav', {
    variant: 'dark',
    brand: { text: 'App' },
    items: [...]
});

// Transparent variant (no background)
Domma.elements.navbar('#nav', {
    variant: 'transparent',
    brand: { text: 'App' },
    items: [...]
});

With Logo Image

Include logo alongside or instead of text:

<nav id="logo-example"></nav>

/**
 * With Logo Image - from public/showcase/elements/navbar.
 */
export function mount(root) {
        // Example 2: Logo
    E.navbar(root.querySelector('#logo-example'), {
            brand: {
              logo: '/plugins/domma-showcase/public/assets/placeholders/32x32-2563eb-ffffff-d.svg',
                text: 'Domma',
                url: '#'
            },
            items: [
                {text: 'Home', url: '#'},
                {text: 'About', url: '#'}
            ]
        });
}

Domma.elements.navbar('#nav', {
    brand: {
        logo: 'https://via.placeholder.com/32x32/2563eb/ffffff?text=D',
        text: 'Domma',
        url: '#'
    },
    items: [
        {text: 'Home', url: '#'},
        {text: 'About', url: '#'}
    ]
});

Dropdown Menus

Multi-level navigation with nested items:

<nav id="dropdown-example"></nav>

/**
 * Dropdown Menus - from public/showcase/elements/navbar.
 */
export function mount(root) {
        // Example 3: Dropdowns
    E.navbar(root.querySelector('#dropdown-example'), {
            brand: {text: 'App'},
            items: [
                {text: 'Home', url: '#'},
                {
                    text: 'Products',
                    items: [
                        {text: 'Product A', url: '#'},
                        {text: 'Product B', url: '#'},
                        {text: 'Product C', url: '#'}
                    ]
                },
                {
                    text: 'Resources',
                    items: [
                        {text: 'Docs', url: '#'},
                        {text: 'Blog', url: '#'},
                        {text: 'Support', url: '#'}
                    ]
                }
            ]
        });
}

Domma.elements.navbar('#nav', {
    brand: { text: 'App' },
    items: [
        { text: 'Home', url: '#' },
        {
            text: 'Products',
            items: [
                { text: 'Product A', url: '#' },
                { text: 'Product B', url: '#' },
                { text: 'Product C', url: '#' }
            ]
        },
        {
            text: 'Resources',
            items: [
                { text: 'Docs', url: '#' },
                { text: 'Blog', url: '#' },
                { text: 'Support', url: '#' }
            ]
        }
    ]
});

Multiple Action Buttons

Add primary, secondary, or outline buttons on the right:

<nav id="actions-example"></nav>

/**
 * Multiple Action Buttons - from public/showcase/elements/navbar.
 */
export function mount(root) {
        // Example 4: Actions
    E.navbar(root.querySelector('#actions-example'), {
            brand: {text: 'SaaS App'},
            items: [
                {text: 'Features', url: '#'},
                {text: 'Pricing', url: '#'}
            ],
            actions: [
              {text: 'Login', variant: 'outline', url: '/login'},
              {text: 'Sign Up', variant: 'primary', url: '/signup'}
            ]
        });
}

Domma.elements.navbar('#nav', {
    brand: { text: 'SaaS App' },
    items: [
        { text: 'Features', url: '#' },
        { text: 'Pricing', url: '#' }
    ],
    actions: [
        { text: 'Login', variant: 'outline', url: '/login' },
        { text: 'Sign Up', variant: 'primary', url: '/signup' }
    ]
});

Fixed and Sticky Positioning

Keep navbar visible while scrolling:

            Domma.elements.navbar('#nav', {
            position: 'fixed',  // Always at top of viewport
            brand: { text: 'App' },
            items: [...]
            });
    

            Domma.elements.navbar('#nav', {
            position: 'sticky',  // Sticks when scrolled to top
            brand: { text: 'App' },
            items: [...]
            });
    

<p class="text-sm text-muted mb-2">Fixed (stays at top of viewport):</p>
<div class="code-block language-javascript mb-3">
    <pre><code>
            Domma.elements.navbar('#nav', {
            position: 'fixed',  // Always at top of viewport
            brand: { text: 'App' },
            items: [...]
            });
    </code></pre>
</div>
<p class="text-sm text-muted mb-2">Sticky (scrolls normally until reaching top):</p>
<div class="code-block language-javascript">
    <pre><code>
            Domma.elements.navbar('#nav', {
            position: 'sticky',  // Sticks when scrolled to top
            brand: { text: 'App' },
            items: [...]
            });
    </code></pre>
</div>

Mobile Hamburger Menu

Automatically collapses to hamburger menu on mobile (resize browser to test):

<nav id="mobile-example"></nav>
<p class="text-sm text-muted mt-3">Resize browser width below 768px to see hamburger menu</p>

/**
 * Mobile Hamburger Menu - from public/showcase/elements/navbar.
 */
export function mount(root) {
        // Example 5: Fixed Position
    E.navbar(root.querySelector('#mobile-example'), {
          brand: {text: 'Responsive App'},
          items: [
            {text: 'Home', url: '#'},
            {text: 'Features', url: '#'},
            {text: 'Pricing', url: '#'},
            {text: 'Contact', url: '#'}
          ],
          collapsible: true,
          collapseAt: 768
        });
        // Example 6: Mobile Hamburger Menu
    E.navbar(root.querySelector('#mobile-example'), {
            brand: {text: 'Responsive App'},
            items: [
                {text: 'Home', url: '#'},
                {text: 'Features', url: '#'},
                {text: 'Pricing', url: '#'},
                {text: 'Contact', url: '#'}
            ],
            collapsible: true,
            collapseAt: 768
        });
}

Domma.elements.navbar('#nav', {
    brand: { text: 'Responsive App' },
    items: [
        { text: 'Home', url: '#'},
        { text: 'Features', url: '#'},
        { text: 'Pricing', url: '#'},
        { text: 'Contact', url: '#'}
    ],
    collapsible: true,  // Enable hamburger menu (default)
    collapseAt: 993     // Breakpoint in pixels (default 993)
});

Programmatic Control

Update navbar dynamically via JavaScript:

<nav id="programmatic-example"></nav>
<div class="flex gap-2 mt-3">
    <button type="button" id="prog-home" class="btn btn-sm btn-primary">Set Home Active</button>
    <button type="button" id="prog-about" class="btn btn-sm btn-primary">Set About Active</button>
    <button type="button" id="prog-expand" class="btn btn-sm btn-secondary">Expand Menu</button>
    <button type="button" id="prog-collapse" class="btn btn-sm btn-secondary">Collapse Menu</button>
</div>

/**
 * Programmatic Control - from public/showcase/elements/navbar.
 */
export function mount(root) {
        // Example 7: Programmatic
    const progNav = E.navbar(root.querySelector('#programmatic-example'), {
            brand: {text: 'App'},
            items: [
                {text: 'Home', url: '#', active: true},
                {text: 'About', url: '#'},
                {text: 'Contact', url: '#'}
            ]
        });
    $(root).find('#prog-home').on('click', () => progNav.setActive(0));
    $(root).find('#prog-about').on('click', () => progNav.setActive(1));
    $(root).find('#prog-expand').on('click', () => progNav.expand());
    $(root).find('#prog-collapse').on('click', () => progNav.collapse());
}

const navbar = Domma.elements.navbar('#nav', {
    brand: { text: 'App' },
    items: [
        { text: 'Home', url: '#', active: true },
        { text: 'About', url: '#'},
        { text: 'Contact', url: '#'}
    ]
});

// Set active item by index
navbar.setActive(1);  // Make "About" active

// Update all items
navbar.setItems([
    { text: 'Dashboard', url: '/dashboard', active: true },
    { text: 'Profile', url: '/profile'}
]);

// Control mobile menu
navbar.expand();         // Show mobile menu
navbar.collapse();       // Hide mobile menu
navbar.toggle();         // Toggle mobile menu
navbar.isCollapsed();    // Check state → true/false

Real-World Example: Documentation Site

Complete navbar for a documentation website:

<nav id="docs-navbar"></nav>

/**
 * Real-World Example: Documentation Site - from public/showcase/elements/navbar.
 */
export function mount(root) {
        // Example 8: Documentation Site
    E.navbar(root.querySelector('#docs-navbar'), {
            brand: {
              logo: '/plugins/domma-showcase/public/assets/placeholders/32x32-2563eb-ffffff-d.svg',
                text: 'API Docs',
                url: '#'
            },
            items: [
                {text: 'Home', url: '#', active: true},
                {
                    text: 'Getting Started',
                    items: [
                        {text: 'Installation', url: '#'},
                        {text: 'Quick Start', url: '#'},
                        {text: 'Configuration', url: '#'}
                    ]
                },
                {
                    text: 'API Reference',
                    items: [
                        {text: 'Elements', url: '#'},
                        {text: 'Utilities', url: '#'},
                        {text: 'Models', url: '#'}
                    ]
                },
                {text: 'Examples', url: '#'}
            ],
            actions: [
                {text: 'GitHub', variant: 'outline', url: '#'}
            ],
            variant: 'light',
            position: 'static'
        });
}

Domma.elements.navbar('#docs-navbar', {
    brand: {
        logo: 'https://via.placeholder.com/32x32/2563eb/ffffff?text=D',
        text: 'API Docs',
        url: '#'
    },
    items: [
        { text: 'Home', url: '#', active: true },
        {
            text: 'Getting Started',
            items: [
                { text: 'Installation', url: '#'},
                { text: 'Quick Start', url: '#'},
                { text: 'Configuration', url: '#'}
            ]
        },
        {
            text: 'API Reference',
            items: [
                { text: 'Elements', url: '#'},
                { text: 'Utilities', url: '#'},
                { text: 'Models', url: '#'}
            ]
        },
        { text: 'Examples', url: '#'}
    ],
    actions: [
        { text: 'GitHub', variant: 'outline', url: '#'}
    ],
    variant: 'light',
    position: 'static'
});

Best Practices

Accessibility

• Semantic HTML - Navbar automatically uses ```` element with role="navigation"
• ARIA Expanded - Mobile toggle button includes aria-expanded state for screen readers
• Keyboard Navigation - All links and buttons are keyboard accessible via Tab key
• Focus Visible - Ensure focus rings are visible for keyboard users (don't remove outline)
• Descriptive Labels - Toggle button has aria-label="Toggle navigation"
• Skip Link - Consider adding a skip navigation link for keyboard users to bypass navbar

Performance

• Single Instance - Only create one navbar instance per page, reuse for updates
• Lazy Dropdowns - Dropdown menus only activate on click, not on hover for better mobile UX
• Debounce Resize - Component debounces window resize events to prevent excessive re-renders
• CSS Transitions - Uses CSS for animations, not JavaScript, for GPU acceleration
• Event Delegation - Uses single event listener for all navigation links

Common Gotchas

• Issue: Fixed navbar covers page content
  Solution: Add padding-top to `` equal to navbar height (~60px)
  Example: body { padding-top: 60px; }
• Issue: Dropdown menu cut off by container
  Solution: Ensure navbar container doesn't have overflow: hidden
  Example: Remove restrictive overflow styles from parent elements
• Issue: Mobile menu not appearing
  Solution: Check that viewport width is below collapseAt breakpoint (default 768px)
  Example: Test on device or resize browser to mobile width
• Issue: Active state not updating
  Solution: Use setActive(index) to programmatically update active item
  Example: navbar.setActive(2) to activate third item
• Issue: Logo image not displaying
  Solution: Verify logo URL is correct and image is accessible
  Example: Check browser console for 404 errors

Tips & Tricks

• Sticky Positioning - Use position: 'sticky' for better UX than fixed (allows scrolling past navbar initially)
• Dark Mode - Use variant: 'dark' for dark theme sites
• Logo + Text - Include both logo and text in brand for better recognition
• Limit Top-Level Items - Keep 5-7 top-level items max, use dropdowns for more
• Mobile-First Actions - Place most important action button first in actions array
• Prevent Default - In onItemClick, call event.preventDefault() to handle navigation via JavaScript

<!-- Accessible Navbar with Skip Link -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<nav id="main-nav"></nav>
<main id="main-content">
    <!-- Page content -->
</main>

<style>
/* .skip-link is a Domma utility (domma.css): hidden until focused, then pinned top left */

/* Fixed navbar body padding */
body {
    padding-top: 60px;
}
</style>

<script>
Domma.elements.navbar('#main-nav', {
    brand: {
        logo: 'https://via.placeholder.com/32x32/2563eb/ffffff?text=D',
        text: 'Accessible App',
        url: '/'
    },
    items: [
        { text: 'Home', url: '/', active: true },
        { text: 'Features', url: '/features' },
        {
            text: 'Resources',
            items: [
                { text: 'Installation', url: '/docs/install' },
                { text: 'Quick Start', url: '/docs/quickstart' },
                { text: 'Configuration', url: '/docs/config' }
            ]
        }
    ],
    actions: [
        { text: 'Sign Up', variant: 'primary', url: '/signup' }
    ],
    variant: 'light',
    position: 'fixed',
    onItemClick: (item, index, event) => {
        event.preventDefault();
        // Handle navigation with proper focus management
        navigateToPage(item.url);
    }
});
</script>

API Reference

Constructor Options

                    subIndex, event, parentItem)` for dropdowns |

Methods

Events / Callbacks

CSS Classes

// Complete API Example
const navbar = Domma.elements.navbar('#nav', {
    brand: {
        text: 'My App',
        logo: '/logo.svg',
        url: '/'
    },
    items: [
        { text: 'Home', url: '/', active: true },
        {
            text: 'Products',
            items: [
                { text: 'Product A', url: '/products/a' },
                { text: 'Product B', url: '/products/b' }
            ]
        }
    ],
    actions: [
        { text: 'Login', variant: 'outline', url: '/login' },
        { text: 'Sign Up', variant: 'primary', url: '/signup' }
    ],
    variant: 'light',
    position: 'sticky',
    collapsible: true,
    collapseAt: 768,
    onItemClick: (item, index, event) => {
        event.preventDefault();
        console.log('Clicked:', item.text);
    }
});

// Methods
navbar.setActive(1);                // Activate second item
navbar.setItems([...]);             // Replace all items
navbar.expand();                    // Show mobile menu
navbar.collapse();                  // Hide mobile menu
navbar.toggle();                    // Toggle mobile menu
const collapsed = navbar.isCollapsed(); // Check state
navbar.destroy();                   // Clean up

Config Engine Integration

Use Domma's declarative $.setup() system to configure Navbars without manual initialisation.

Basic Setup

$.setup({
    '#main-nav': {
        component: 'navbar',
        options: {
            brand: { text: 'My App', url: '/' },
            items: [
                { text: 'Home', url: '/', active: true },
                { text: 'About', url: '/about' }
            ],
            variant: 'light'
        }
    }
});

Complete Configuration

$.setup({
    '#app-navbar': {
        component: 'navbar',
        options: {
            brand: {
                logo: '/logo.svg',
                text: 'SaaS Platform',
                url: '/'
            },
            items: [
                { text: 'Dashboard', url: '/dashboard', active: true },
                {
                    text: 'Tools',
                    items: [
                        { text: 'Analytics', url: '/tools/analytics' },
                        { text: 'Reports', url: '/tools/reports' }
                    ]
                },
                { text: 'Settings', url: '/settings' }
            ],
            actions: [
                { text: 'Upgrade', variant: 'outline', url: '/upgrade' },
                { text: 'Account', variant: 'primary', url: '/account' }
            ],
            variant: 'dark',
            position: 'sticky',
            onItemClick: (item, index, event) => {
                event.preventDefault();
                navigateToPage(item.url);
            }
        }
    }
});

Live Demo

Navbar configured via Config Engine:

<nav id="config-demo-navbar"></nav>

/**
 * Live Demo - from public/showcase/elements/navbar.
 */
export function mount(root) {
        // Config Engine Demo
    $.setup({
            '#config-demo-navbar': {
                component: 'navbar',
                options: {
                    brand: {text: 'Config Demo'},
                    items: [
                        {text: 'Home', url: '#', active: true},
                        {text: 'Docs', url: '#'}
                    ],
                    actions: [
                        {text: 'Get Started', variant: 'primary', url: '#'}
                    ]
                }
            }
        });
}

// Configuration
$.setup({
    '#config-demo-navbar': {
        component: 'navbar',
        options: {
            brand: { text: 'Config Demo' },
            items: [
                { text: 'Home', url: '#', active: true },
                { text: 'Docs', url: '#'}
            ],
            actions: [
                { text: 'Get Started', variant: 'primary', url: '#'}
            ]
        }
    }
});

// Access instance later
const navbar = Domma.elements.get('#config-demo-navbar');
navbar.setActive(1);

CSS Customisation

Override these CSS variables to customise Navbar appearance and match your design system.

Example Override

:root {
    /* Dark navbar */
    --dm-navbar-bg: #0f172a;
    --dm-navbar-text: #f1f5f9;
    --dm-navbar-border: #1e293b;
    --dm-hover-bg: rgba(255,255,255,0.1);
}

Full CSS Customisation Cheat-Sheet →

Related Elements

<div class="grid grid-cols-1 gap-4 grid-auto-fit-250"><a href="/showcase/elements/breadcrumbs" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Breadcrumbs</h3>
            <p class="card-text">Navigation trails showing hierarchy. Complement navbar by providing secondary
                navigation below the header.</p>
        </div>
    </a>

    <a href="/showcase/elements/dropdown" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Dropdown</h3>
            <p class="card-text">Standalone dropdown menus. Navbar includes built-in dropdown support for nested
                navigation.</p>
        </div>
    </a>

    <a href="/showcase/elements/tabs" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Tabs</h3>
            <p class="card-text">Tabbed navigation. Use navbar for site-wide navigation, tabs for page-level
                content switching.</p>
        </div>
    </a>

    <a href="/showcase/elements/button-group" class="card card-hover">
        <div class="card-body">
            <h3 class="card-title">Button Group</h3>
            <p class="card-text">Connected buttons. Use in navbar actions section for grouped controls or view
                toggles.</p>
        </div>
    </a>
</div>