Menu

Menu is used to display a list of links vertically or horizontally. Supports icons, submenus, and collapsible sections.

Basic Example

Vertical menu with active state



const { default: Menu } = await import('/components/navigation/menu.js');

const { signal, tags, $ } = Lightview;

const active = signal('home');
const items = ['home', 'profile', 'settings', 'logout'];

const menu = Menu({ class: 'bg-base-200 rounded-box w-56' },
    ...items.map(item => 
        Menu.Item({},
            Menu.Link({ 
                active: () => active.value === item,
                onclick: () => { active.value = item; }
            }, item.charAt(0).toUpperCase() + item.slice(1))
        )
    )
);

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

Horizontal Menu

Navigation bar style menu



const { default: Menu } = await import('/components/navigation/menu.js');

const { signal, tags, $ } = Lightview;

const current = signal('features');

const menu = Menu({ horizontal: true, class: 'bg-base-200 rounded-box' },
    Menu.Item({},
        Menu.Link({ 
            active: () => current.value === 'features',
            onclick: () => { current.value = 'features'; }
        }, '✨ Features')
    ),
    Menu.Item({},
        Menu.Link({ 
            active: () => current.value === 'pricing',
            onclick: () => { current.value = 'pricing'; }
        }, '💰 Pricing')
    ),
    Menu.Item({},
        Menu.Link({ 
            active: () => current.value === 'docs',
            onclick: () => { current.value = 'docs'; }
        }, '📚 Docs')
    )
);

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

Props

Prop Type Default Description
horizontal boolean false Horizontal layout
size string - 'xs' | 'sm' | 'md' | 'lg'

Sub-components

Component Props Description
Menu.Item - Menu list item (li)
Menu.Link active, disabled, href Clickable link
Menu.Title - Section header
Menu.Details open Collapsible submenu

With Title

With Submenu

Sizes

For more examples, see the DaisyUI Menu documentation.