426 lines
12 KiB
Markdown
426 lines
12 KiB
Markdown
# Menu
|
||
|
||
Menu component for creating navigation menus, sidebars, and dropdowns with support for nested items, icons, and active states.
|
||
|
||
## Tag
|
||
|
||
`Menu`
|
||
|
||
## Props
|
||
|
||
| Prop | Type | Default | Description |
|
||
| :--- | :--- | :--- | :--- |
|
||
| `items` | `Array<MenuItem>` | `[]` | Menu items configuration |
|
||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
||
|
||
### MenuItem Structure
|
||
|
||
| Property | Type | Description |
|
||
| :--- | :--- | :--- |
|
||
| `label` | `string \| VNode` | Menu item text or content |
|
||
| `icon` | `string \| VNode` | Optional icon to display |
|
||
| `active` | `boolean \| Signal<boolean>` | Active state highlighting |
|
||
| `onclick` | `function` | Click handler |
|
||
| `children` | `Array<MenuItem>` | Nested submenu items |
|
||
| `open` | `boolean` | Whether submenu is open (for nested items) |
|
||
|
||
## Styling
|
||
|
||
Menu supports all **daisyUI Menu classes**:
|
||
|
||
| Category | Keywords | Description |
|
||
| :--- | :--- | :--- |
|
||
| Direction | `menu-vertical` (default), `menu-horizontal` | Menu orientation |
|
||
| Size | `menu-xs`, `menu-sm`, `menu-md`, `menu-lg` | Menu scale |
|
||
| Style | `menu-compact` | Reduced padding |
|
||
| Background | `bg-base-100`, `bg-base-200` | Background colors |
|
||
|
||
> For further details, check the [daisyUI Menu Documentation](https://daisyui.com/components/menu) – Full reference for CSS classes.
|
||
|
||
## Live Examples
|
||
|
||
### Basic Menu
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const BasicDemo = () => {
|
||
const activeItem = $('home');
|
||
|
||
return Menu({
|
||
items: [
|
||
{
|
||
label: 'Home',
|
||
active: () => activeItem() === 'home',
|
||
onclick: () => activeItem('home')
|
||
},
|
||
{
|
||
label: 'About',
|
||
active: () => activeItem() === 'about',
|
||
onclick: () => activeItem('about')
|
||
},
|
||
{
|
||
label: 'Contact',
|
||
active: () => activeItem() === 'contact',
|
||
onclick: () => activeItem('contact')
|
||
}
|
||
]
|
||
});
|
||
};
|
||
Mount(BasicDemo, '#demo-basic');
|
||
```
|
||
|
||
### With Icons
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-icons" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const IconsDemo = () => {
|
||
const activeItem = $('dashboard');
|
||
|
||
return Menu({
|
||
items: [
|
||
{
|
||
icon: '🏠',
|
||
label: 'Dashboard',
|
||
active: () => activeItem() === 'dashboard',
|
||
onclick: () => activeItem('dashboard')
|
||
},
|
||
{
|
||
icon: '📊',
|
||
label: 'Analytics',
|
||
active: () => activeItem() === 'analytics',
|
||
onclick: () => activeItem('analytics')
|
||
},
|
||
{
|
||
icon: '⚙️',
|
||
label: 'Settings',
|
||
active: () => activeItem() === 'settings',
|
||
onclick: () => activeItem('settings')
|
||
},
|
||
{
|
||
icon: '👤',
|
||
label: 'Profile',
|
||
active: () => activeItem() === 'profile',
|
||
onclick: () => activeItem('profile')
|
||
}
|
||
]
|
||
});
|
||
};
|
||
Mount(IconsDemo, '#demo-icons');
|
||
```
|
||
|
||
### Nested Menu
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-nested" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const NestedDemo = () => {
|
||
const activeItem = $('products');
|
||
|
||
return Menu({
|
||
items: [
|
||
{
|
||
label: 'Dashboard',
|
||
onclick: () => activeItem('dashboard'),
|
||
active: () => activeItem() === 'dashboard'
|
||
},
|
||
{
|
||
label: 'Products',
|
||
icon: '📦',
|
||
open: true,
|
||
children: [
|
||
{
|
||
label: 'All Products',
|
||
onclick: () => activeItem('all-products'),
|
||
active: () => activeItem() === 'all-products'
|
||
},
|
||
{
|
||
label: 'Add New',
|
||
onclick: () => activeItem('add-product'),
|
||
active: () => activeItem() === 'add-product'
|
||
},
|
||
{
|
||
label: 'Categories',
|
||
children: [
|
||
{
|
||
label: 'Electronics',
|
||
onclick: () => activeItem('electronics'),
|
||
active: () => activeItem() === 'electronics'
|
||
},
|
||
{
|
||
label: 'Clothing',
|
||
onclick: () => activeItem('clothing'),
|
||
active: () => activeItem() === 'clothing'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
label: 'Orders',
|
||
icon: '📋',
|
||
onclick: () => activeItem('orders'),
|
||
active: () => activeItem() === 'orders'
|
||
},
|
||
{
|
||
label: 'Settings',
|
||
icon: '⚙️',
|
||
onclick: () => activeItem('settings'),
|
||
active: () => activeItem() === 'settings'
|
||
}
|
||
]
|
||
});
|
||
};
|
||
Mount(NestedDemo, '#demo-nested');
|
||
```
|
||
|
||
### Horizontal Menu
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-horizontal" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const HorizontalDemo = () => {
|
||
const activeItem = $('home');
|
||
|
||
return Menu({
|
||
class: 'menu-horizontal rounded-box',
|
||
items: [
|
||
{
|
||
label: 'Home',
|
||
active: () => activeItem() === 'home',
|
||
onclick: () => activeItem('home')
|
||
},
|
||
{
|
||
label: 'Products',
|
||
children: [
|
||
{ label: 'Electronics', onclick: () => activeItem('electronics') },
|
||
{ label: 'Clothing', onclick: () => activeItem('clothing') },
|
||
{ label: 'Books', onclick: () => activeItem('books') }
|
||
]
|
||
},
|
||
{
|
||
label: 'About',
|
||
onclick: () => activeItem('about'),
|
||
active: () => activeItem() === 'about'
|
||
},
|
||
{
|
||
label: 'Contact',
|
||
onclick: () => activeItem('contact'),
|
||
active: () => activeItem() === 'contact'
|
||
}
|
||
]
|
||
});
|
||
};
|
||
Mount(HorizontalDemo, '#demo-horizontal');
|
||
```
|
||
|
||
### Sidebar Menu
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-sidebar" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const SidebarDemo = () => {
|
||
const activeItem = $('dashboard');
|
||
|
||
return Div({ class: 'flex' }, [
|
||
Div({ class: 'w-64' }, [
|
||
Menu({
|
||
class: 'rounded-box w-full',
|
||
items: [
|
||
{
|
||
icon: '📊',
|
||
label: 'Dashboard',
|
||
active: () => activeItem() === 'dashboard',
|
||
onclick: () => activeItem('dashboard')
|
||
},
|
||
{
|
||
icon: '👥',
|
||
label: 'Users',
|
||
children: [
|
||
{
|
||
label: 'All Users',
|
||
onclick: () => activeItem('all-users'),
|
||
active: () => activeItem() === 'all-users'
|
||
},
|
||
{
|
||
label: 'Add User',
|
||
onclick: () => activeItem('add-user'),
|
||
active: () => activeItem() === 'add-user'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
icon: '📁',
|
||
label: 'Files',
|
||
onclick: () => activeItem('files'),
|
||
active: () => activeItem() === 'files'
|
||
},
|
||
{
|
||
icon: '⚙️',
|
||
label: 'Settings',
|
||
onclick: () => activeItem('settings'),
|
||
active: () => activeItem() === 'settings'
|
||
}
|
||
]
|
||
})
|
||
]),
|
||
Div({ class: 'flex-1 p-4' }, [
|
||
Div({ class: 'alert alert-info' }, () => `Current page: ${activeItem()}`)
|
||
])
|
||
]);
|
||
};
|
||
Mount(SidebarDemo, '#demo-sidebar');
|
||
```
|
||
|
||
### Account Menu
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-account" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const AccountDemo = () => {
|
||
const notifications = $(3);
|
||
|
||
return Menu({
|
||
class: 'rounded-box w-56',
|
||
items: [
|
||
{
|
||
icon: '👤',
|
||
label: 'My Profile',
|
||
onclick: () => Toast('Profile clicked', 'alert-info', 2000)
|
||
},
|
||
{
|
||
icon: '📧',
|
||
label: 'Messages',
|
||
onclick: () => Toast('Messages opened', 'alert-info', 2000)
|
||
},
|
||
{
|
||
icon: '🔔',
|
||
label: 'Notifications',
|
||
badge: () => notifications(),
|
||
onclick: () => {
|
||
notifications(0);
|
||
Toast('Notifications cleared', 'alert-success', 2000);
|
||
}
|
||
},
|
||
{
|
||
icon: '⚙️',
|
||
label: 'Settings',
|
||
onclick: () => Toast('Settings opened', 'alert-info', 2000)
|
||
},
|
||
{
|
||
icon: '🚪',
|
||
label: 'Logout',
|
||
onclick: () => Toast('Logged out', 'alert-warning', 2000)
|
||
}
|
||
]
|
||
});
|
||
};
|
||
Mount(AccountDemo, '#demo-account');
|
||
```
|
||
|
||
### Collapsible Sidebar
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-collapsible" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const CollapsibleDemo = () => {
|
||
const collapsed = $(false);
|
||
const activeItem = $('dashboard');
|
||
|
||
return Div({ class: 'flex gap-4' }, [
|
||
Div({ class: `transition-all duration-300 ${collapsed() ? 'w-16' : 'w-64'}` }, [
|
||
Button({
|
||
class: 'btn btn-ghost btn-sm mb-2 w-full',
|
||
onclick: () => collapsed(!collapsed())
|
||
}, collapsed() ? '→' : '←'),
|
||
Menu({
|
||
class: `rounded-box ${collapsed() ? 'menu-compact' : ''}`,
|
||
items: [
|
||
{ icon: '📊', label: collapsed() ? '' : 'Dashboard', active: () => activeItem() === 'dashboard', onclick: () => activeItem('dashboard') },
|
||
{ icon: '👥', label: collapsed() ? '' : 'Users', active: () => activeItem() === 'users', onclick: () => activeItem('users') },
|
||
{ icon: '📁', label: collapsed() ? '' : 'Files', active: () => activeItem() === 'files', onclick: () => activeItem('files') },
|
||
{ icon: '⚙️', label: collapsed() ? '' : 'Settings', active: () => activeItem() === 'settings', onclick: () => activeItem('settings') }
|
||
]
|
||
})
|
||
]),
|
||
Div({ class: 'flex-1' }, [
|
||
Div({ class: 'alert alert-info' }, () => `Selected: ${activeItem()}`)
|
||
])
|
||
]);
|
||
};
|
||
Mount(CollapsibleDemo, '#demo-collapsible');
|
||
```
|
||
|
||
### All Variants
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-wrap gap-8"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const VariantsDemo = () => {
|
||
const items = [
|
||
{ label: 'Item 1' },
|
||
{ label: 'Item 2' },
|
||
{ label: 'Item 3', children: [
|
||
{ label: 'Subitem 1' },
|
||
{ label: 'Subitem 2' }
|
||
]}
|
||
];
|
||
|
||
return Div({ class: 'flex flex-wrap gap-8' }, [
|
||
Div({ class: 'w-48' }, [
|
||
Div({ class: 'text-sm font-bold mb-2' }, 'Default'),
|
||
Menu({ items })
|
||
]),
|
||
Div({ class: 'w-48' }, [
|
||
Div({ class: 'text-sm font-bold mb-2' }, 'Compact'),
|
||
Menu({ items, class: 'menu-compact' })
|
||
]),
|
||
Div({ class: 'w-48' }, [
|
||
Div({ class: 'text-sm font-bold mb-2' }, 'With Shadow'),
|
||
Menu({ items, class: 'shadow-lg' })
|
||
])
|
||
]);
|
||
};
|
||
Mount(VariantsDemo, '#demo-variants');
|
||
``` |