Navbar

Basic Example

Navbar with brand and menu items

const { default: Navbar } = await import('/components/layout/navbar.js');
const { default: Button } = await import('/components/actions/button.js');
const { default: Menu } = await import('/components/navigation/menu.js');

const { tags, $ } = Lightview;

const navbar = Navbar({ class: 'bg-base-100 rounded-box' },
    Navbar.Start({},
        Button({ ghost: true, class: 'text-xl' }, '🚀 Lightview')
    ),
    Navbar.Center({ class: 'hidden lg:flex' },
        Menu({ horizontal: true },
            Menu.Item({}, Menu.Link({}, 'Features')),
            Menu.Item({}, Menu.Link({}, 'Pricing')),
            Menu.Item({}, Menu.Link({}, 'About'))
        )
    ),
    Navbar.End({},
        Button({ color: 'primary' }, 'Get Started')
    )
);

$('#demo').insert(navbar);