### How to Use
🔗 Editor: https://bubble.io/page?id=testeplugins-85494&tab=Design&name=ui_kit_pro&type=page&elements=bTJxH1

**1. Add Lucide Icons to your app:**

Go to Settings → SEO/metatags → Script/meta tags in the header and add:
```html
<script src="https://unpkg.com/lucide@latest"></script>
```

---

**2. Navigation Menu Setup:**

**Using Option Sets (Recommended):**
Create an Option Set called "Menu" with attributes:
- `id` (text) - Unique identifier
- `label` (text) - Display text  
- `icon` (text) - Lucide icon name
- `parent_id` (text) - Parent item ID for submenus

In the `menu_items` property, use "Format as text":
```
See how:
🔗https://66d6f9b26f6e89e4f2c2e39dddbbb195.cdn.bubble.io/f1770299703745x319373495180062660/format%20content%20as%20a%20text.png

JSON Exemple:

[
 {
   "id": "dashboard",
   "label": "Dashboard",
   "icon": "layout-dashboard",
   "badge": "New",
   "badge_color": "#22c55e"
 },
 {
   "id": "analytics",
   "label": "Analytics",
   "icon": "bar-chart-3",
   "children": [
     {
       "id": "analytics-overview",
       "label": "Overview",
       "icon": "eye"
     },
     {
       "id": "analytics-reports",
       "label": "Reports",
       "icon": "file-text"
     },
     {
       "id": "analytics-realtime",
       "label": "Real-time",
       "icon": "activity",
       "badge": "Live",
       "badge_color": "#ef4444"
     }
   ]
 },
 {
   "id": "users",
   "label": "Users",
   "icon": "users",
   "badge": "128",
   "badge_color": "#6366f1",
   "children": [
     {
       "id": "users-list",
       "label": "All Users",
       "icon": "list"
     },
     {
       "id": "users-add",
       "label": "Add User",
       "icon": "user-plus"
     },
     {
       "id": "users-roles",
       "label": "Roles & Permissions",
       "icon": "shield"
     }
   ]
 },
 {
   "type": "divider"
 },
 {
   "id": "products",
   "label": "Products",
   "icon": "shopping-bag",
   "children": [
     {
       "id": "products-catalog",
       "label": "Catalog",
       "icon": "grid"
     },
     {
       "id": "products-inventory",
       "label": "Inventory",
       "icon": "package"
     },
     {
       "id": "products-categories",
       "label": "Categories",
       "icon": "folder"
     }
   ]
 },
 {
   "id": "orders",
   "label": "Orders",
   "icon": "shopping-cart",
   "badge": "5",
   "badge_color": "#f59e0b"
 },
 {
   "id": "messages",
   "label": "Messages",
   "icon": "mail",
   "badge": "12",
   "badge_color": "#3b82f6"
 },
 {
   "type": "divider"
 },
 {
   "id": "settings",
   "label": "Settings",
   "icon": "settings",
   "children": [
     {
       "id": "settings-general",
       "label": "General",
       "icon": "sliders"
     },
     {
       "id": "settings-security",
       "label": "Security",
       "icon": "lock"
     },
     {
       "id": "settings-notifications",
       "label": "Notifications",
       "icon": "bell"
     },
     {
       "id": "settings-integrations",
       "label": "Integrations",
       "icon": "plug"
     }
   ]
 },
 {
   "id": "help",
   "label": "Help & Support",
   "icon": "help-circle"
 }
]
---

**3. Action Button Setup:**

Simply drag the Action Button element and configure:
- Choose `button_type` preset or use `custom`
- Set variant, size, and colors
- Enable `show_confirmation` for destructive actions
- Use `btn_clicked` event for your workflow

---

**4. Icon Names:**

Find icons at https://lucide.dev/icons
Use the icon name exactly as shown (e.g., "home", "settings", "bar-chart-2")