import { component, render } from 'sigx';
import { Menu } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Menu background="base-200" rounded width="56">
            <Menu.Item>Home</Menu.Item>
            <Menu.Item>About</Menu.Item>
            <Menu.Item>Services</Menu.Item>
            <Menu.Item>Contact</Menu.Item>
        </Menu>
    );
});

render(<Demo />, "#sandbox");

Links#

By default a Menu.Item wraps its content in an <a> for styling. To make it a real navigable link, pass href. To use your own interactive element (a router <Link>, a <button>, …) without nesting interactive elements, pass asChild and provide the element yourself.

TSX

Loading preview...

import { component, render } from 'sigx';
import { Menu } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Menu background="base-200" rounded width="56">
            <Menu.Item href="/daisyui/docs/getting-started">Getting started</Menu.Item>
            <Menu.Item href="/daisyui/docs/components/button">Button</Menu.Item>
            <Menu.Item asChild>
                <button type="button" onClick={() => alert('clicked')}>Run action</button>
            </Menu.Item>
        </Menu>
    );
});

render(<Demo />, "#sandbox");

Use model binding to track the active menu item:

TSX

Loading preview...

import { component, render } from 'sigx';
import { Menu, Card, Badge, Col, Text } from '@sigx/daisyui';

const Demo = component(({ signal }) => {
    const nav = signal({ active: 'home' });
    
    const items = [
        { id: 'home', label: 'Home' },
        { id: 'about', label: 'About' },
        { id: 'services', label: 'Services' },
        { id: 'contact', label: 'Contact' }
    ];
    
    return () => (
        <Card>
            <Card.Body>
                <Col gap="4">
                    <Menu model={() => nav.active} background="base-200" rounded width="56">
                        {items.map(item => (
                            <Menu.Item value={item.id}>{item.label}</Menu.Item>
                        ))}
                    </Menu>
                    
                    <Col gap="1">
                        <Text size="sm" color="muted">Current page:</Text>
                        <Badge variant="primary" size="lg">{nav.active}</Badge>
                    </Col>
                </Col>
            </Card.Body>
        </Card>
    );
});

render(<Demo />, "#sandbox");

TSX

Loading preview...

import { component, render } from 'sigx';
import { Menu, Row, Text } from '@sigx/daisyui';

const Demo = component(() => {
    const items = [
        { icon: '🏠', label: 'Home' },
        { icon: 'ℹ️', label: 'About' },
        { icon: '📊', label: 'Stats' }
    ];

    return () => (
        <Menu background="base-200" rounded width="56">
            {items.map(item => (
                <Menu.Item>
                    <Row align="center" gap="2">
                        <Text as="span">{item.icon}</Text>
                        <Text as="span">{item.label}</Text>
                    </Row>
                </Menu.Item>
            ))}
        </Menu>
    );
});

render(<Demo />, "#sandbox");

TSX

Loading preview...

import { component, render } from 'sigx';
import { Menu } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Menu background="base-200" rounded width="56">
            <Menu.Title>Category 1</Menu.Title>
            <Menu.Item>Item 1</Menu.Item>
            <Menu.Item>Item 2</Menu.Item>

            <Menu.Title>Category 2</Menu.Title>
            <Menu.Item>Item 3</Menu.Item>
            <Menu.Item>Item 4</Menu.Item>
        </Menu>
    );
});

render(<Demo />, "#sandbox");

TSX

Loading preview...

import { component, render } from 'sigx';
import { Menu } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Menu background="base-200" rounded width="56">
            <Menu.Item>Item 1</Menu.Item>
            <Menu.Item submenu>
                <details open>
                    <summary>Parent Item</summary>
                    <ul>
                        <li><a>Submenu 1</a></li>
                        <li><a>Submenu 2</a></li>
                        <li>
                            <details open>
                                <summary>Nested Parent</summary>
                                <ul>
                                    <li><a>Deep Item 1</a></li>
                                    <li><a>Deep Item 2</a></li>
                                </ul>
                            </details>
                        </li>
                    </ul>
                </details>
            </Menu.Item>
            <Menu.Item>Item 3</Menu.Item>
        </Menu>
    );
});

render(<Demo />, "#sandbox");

TSX

Loading preview...

import { component, render } from 'sigx';
import { Menu, Card, Col, Text } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Card>
            <Card.Body>
                <Col gap="4">
                    <Menu size="xs" background="base-200" rounded width="56">
                        <Menu.Item>xs size</Menu.Item>
                        <Menu.Item>Item 2</Menu.Item>
                        <Menu.Item>Item 3</Menu.Item>
                    </Menu>
                    
                    <Menu size="sm" background="base-200" rounded width="56">
                        <Menu.Item>sm size</Menu.Item>
                        <Menu.Item>Item 2</Menu.Item>
                        <Menu.Item>Item 3</Menu.Item>
                    </Menu>
                    
                    <Menu size="md" background="base-200" rounded width="56">
                        <Menu.Item>md size</Menu.Item>
                        <Menu.Item>Item 2</Menu.Item>
                        <Menu.Item>Item 3</Menu.Item>
                    </Menu>
                    
                    <Menu size="lg" background="base-200" rounded width="56">
                        <Menu.Item>lg size</Menu.Item>
                        <Menu.Item>Item 2</Menu.Item>
                        <Menu.Item>Item 3</Menu.Item>
                    </Menu>
                </Col>
            </Card.Body>
        </Card>
    );
});

render(<Demo />, "#sandbox");

TSX

Loading preview...

import { component, render } from 'sigx';
import { Menu, Card, Text } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Card>
            <Card.Body>
                <Menu horizontal background="base-200" rounded>
                    <Menu.Item>Item 1</Menu.Item>
                    <Menu.Item>Item 2</Menu.Item>
                    <Menu.Item>Item 3</Menu.Item>
                </Menu>
            </Card.Body>
        </Card>
    );
});

render(<Demo />, "#sandbox");

TSX

Loading preview...

import { component, render } from 'sigx';
import { Menu, Card, Badge, Text } from '@sigx/daisyui';

const Demo = component(() => {
    const items = [
        { label: 'Inbox', badge: '99+', variant: 'primary' as const },
        { label: 'Notifications', badge: '8', variant: 'secondary' as const },
        { label: 'Updates', badge: 'New', variant: 'accent' as const }
    ];

    // Place the label and badge as direct children of Menu.Item — daisyUI's
    // menu-item grid pushes the trailing badge to the right automatically.
    return () => (
        <Card>
            <Card.Body>
                <Menu background="base-200" rounded width="64">
                    {items.map(item => (
                        <Menu.Item>
                            <Text as="span">{item.label}</Text>
                            <Badge variant={item.variant}>{item.badge}</Badge>
                        </Menu.Item>
                    ))}
                </Menu>
            </Card.Body>
        </Card>
    );
});

render(<Demo />, "#sandbox");

Disabled Items#

TSX

Loading preview...

import { component, render } from 'sigx';
import { Menu, Card, Text } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Card>
            <Card.Body>
                <Menu background="base-200" rounded width="56">
                    <Menu.Item>Normal item</Menu.Item>
                    <Menu.Item disabled>Disabled item</Menu.Item>
                    <Menu.Item>Normal item</Menu.Item>
                    <Menu.Item disabled>Another disabled</Menu.Item>
                </Menu>
            </Card.Body>
        </Card>
    );
});

render(<Demo />, "#sandbox");

TSX

Loading preview...

import { component, render } from 'sigx';
import { Menu, Card, Badge, Row, Col, Heading, Text } from '@sigx/daisyui';

const Demo = component(({ signal }) => {
    const nav = signal({ active: 'dashboard' });
    
    const menuItems = [
        { id: 'dashboard', icon: '📊', label: 'Dashboard' },
        { id: 'users', icon: '👥', label: 'Users', badge: 12 },
        { id: 'products', icon: '📦', label: 'Products' },
        { id: 'orders', icon: '🛒', label: 'Orders', badge: 5 },
        { id: 'analytics', icon: '📈', label: 'Analytics' },
        { id: 'settings', icon: '⚙️', label: 'Settings' }
    ];
    
    return () => (
        <Card>
            <Card.Body>
                <Row gap="4" align="start">
                    <Col class="w-64">
                        <Menu model={() => nav.active} background="base-200" rounded width="full">
                            {menuItems.map(item => (
                                <Menu.Item value={item.id}>
                                    <Text as="span">{item.icon}</Text>
                                    <Text as="span">{item.label}</Text>
                                    {item.badge && (
                                        <Badge variant="primary" size="sm">{item.badge}</Badge>
                                    )}
                                </Menu.Item>
                            ))}
                        </Menu>
                    </Col>
                    
                    <Col gap="2" grow class="p-4 bg-base-200 rounded-lg">
                        <Heading level={3} size="xl" class="capitalize">{nav.active}</Heading>
                        <Text color="muted">Content for {nav.active} page goes here.</Text>
                    </Col>
                </Row>
            </Card.Body>
        </Card>
    );
});

render(<Demo />, "#sandbox");

Props#

Prop	Type	Default	Description
`model`	`() => string`	-	Two-way binding for active item
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Menu item size
`horizontal`	`boolean`	`false`	Horizontal layout
`background`	`BackgroundColor`	-	Panel background (e.g. `"base-200"`) — theme-aware
`rounded`	`RadiusValue \| boolean`	-	Corner rounding. Theme radii `"box"` / `"field"` / `"selector"` (or fixed `sm`…`3xl`/`full`); `true` → box
`width`	`SizeValue`	-	Menu width — Tailwind step (`"56"`=14rem) or unitful value (`"560px"`). daisyUI menus are `fit-content` by default
`padding`	`Spacing`	-	Inner padding
`class`	`string`	-	Additional CSS classes

Menu items are already rounded by the theme's field radius. The background/rounded props above style the whole menu panel (rounded uses the theme box radius); you can also wrap the menu in a box container (Col/Row) if you prefer.

Menu.Item Props#

Prop	Type	Default	Description
`value`	`string`	-	Value for model binding
`active`	`boolean`	`false`	Force active state
`href`	`string`	-	Render the item as a real link (`<a href>`); `menu-active` is applied automatically
`asChild`	`boolean`	`false`	Render the slot directly (no `<a>` wrap) so you can supply your own `<a>`/`<button>`/router `<Link>` without nesting interactive elements. You own the active styling
`submenu`	`boolean`	`false`	Render slot directly (no `<a>` wrap) for a nested `<details>` submenu
`disabled`	`boolean`	`false`	Disable the item
`class`	`string`	-	Additional CSS classes

Menu.Title Props#

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes

Events#

Event	Type	Description
`update:modelValue`	`(value: string) => void`	Emitted when active item changes

Menu#

Import#

Basic Menu#

Links#

Menu with Active Item#

Menu with Icons#

Menu with Title#

Nested Menu (Submenu)#

Menu Sizes#

Horizontal Menu#

Menu with Badges#

Disabled Items#

Sidebar Navigation Example#

Props#

Menu Props#

Menu.Item Props#

Menu.Title Props#

Events#