EZNavbar Demo

Click on the navigation tabs to explore different sections.

Features Demonstration

This demo showcases the following features:

Clickable site icon linked to the home page
Support for Unicode, Font Awesome, favicons, or image URLs for item icons
Dynamic styling using setProperty and getProperty

// Initialize the EZNavbar
    const navbar = new EZNavbar(document.getElementById('horizontal-navbar'), {
        orientation: 'horizontal',
        siteIcon: 'https://example.com/logo.png', // Site icon as an image URL
        siteIconUrl: '/', // Link to the home page
        visible: true,
        items: [
            { text: 'Home', icon: '🏠', url: '/' },
            { text: 'About', icon: 'fa-info-circle', url: '/about' }, // Font Awesome icon
            { text: 'Contact', icon: 'https://example.com/contact-icon.png', url: '/contact' } // Image URL
        ]
    });
    navbar.render();

    // Dynamically update styles
    navbar.setProperty('backgroundColor', '#1a1a1a', 'root');
    navbar.setProperty('color', '#ffcc00', 'itemsContainer');

    // Retrieve a style property
    const bgColor = navbar.getProperty('backgroundColor', 'root');
    console.log('Navbar background color:', bgColor);