offline docs
This commit is contained in:
113
offline-docs/daisyui/menu.md
Normal file
113
offline-docs/daisyui/menu.md
Normal file
@@ -0,0 +1,113 @@
|
||||
# daisyUI Documentation - Menu Component
|
||||
|
||||
Menu is a vertical list of links or buttons.
|
||||
|
||||
## Classes and Usage
|
||||
|
||||
### Core Classes:
|
||||
- **menu** - The main menu component
|
||||
- **menu-title** - Title for menu sections
|
||||
- **menu-item** - Individual menu item
|
||||
- **menu-horizontal** - Horizontal layout
|
||||
- **menu-vertical** - Vertical layout (default)
|
||||
- **menu-sm** - Small size
|
||||
- **menu-md** - Medium size [Default]
|
||||
- **menu-lg** - Large size
|
||||
- **menu-xs** - Extra small size
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Menu
|
||||
|
||||
```html
|
||||
<ul class="menu bg-base-200 text-base-content w-56 rounded-box">
|
||||
<li>
|
||||
<a>Menu Item 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Menu Item 2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Menu Item 3</a>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Menu with Icons
|
||||
|
||||
```html
|
||||
<ul class="menu bg-base-200 text-base-content w-56 rounded-box">
|
||||
<li>
|
||||
<a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-5 w-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||
</svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-5 w-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
||||
</svg>
|
||||
Profile
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Horizontal Menu
|
||||
|
||||
```html
|
||||
<ul class="menu menu-horizontal bg-base-200 text-base-content rounded-box">
|
||||
<li>
|
||||
<a>Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Profile</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Menu with Title
|
||||
|
||||
```html
|
||||
<ul class="menu bg-base-200 text-base-content w-56 rounded-box">
|
||||
<li>
|
||||
<h2 class="menu-title">Main Navigation</h2>
|
||||
</li>
|
||||
<li>
|
||||
<a>Dashboard</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Profile</a>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Menu with Active State
|
||||
|
||||
```html
|
||||
<ul class="menu bg-base-200 text-base-content w-56 rounded-box">
|
||||
<li>
|
||||
<a class="active">Active Item</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>Normal Item</a>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
- Vertical list of links or buttons
|
||||
- Horizontal or vertical layout options
|
||||
- Multiple size options (xs, sm, md, lg)
|
||||
- Title support for menu sections
|
||||
- Active state support
|
||||
- Works with icons
|
||||
|
||||
This component is useful for creating navigation menus, sidebars, or any vertical list of interactive items.
|
||||
Reference in New Issue
Block a user