From f1d1081b6755f5cf9b7f847fa60ca1e98c7de058 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Fri, 7 Aug 2026 17:24:03 +0530 Subject: [PATCH] feat(ui): build MegaMenu and rebuild Sidebar on Drawer MegaMenu replaces a scaffold with a trigger and a wide panel of grouped link columns. One level deep on purpose: a mega menu exists to show breadth flat so everything is one click away, and nesting inside the panel buries content behind hover-within-hover. Nav is the component for cascading submenus. The panel is anchored so the runtime clamp keeps it inside the viewport. Sidebar now composes Drawer for its off-canvas presentation instead of a hand-rolled backdrop, inheriting the focus trap and scroll lock from one place. Single items, labelled groups and branches nested to three levels, with vertical roving focus. Sidebar classes move to the BEM naming the rest of the library uses, which is a breaking change; nesting via children still works, since that is what shipped in 0.8.5. Co-Authored-By: Claude Opus 5 --- docs/ui-visual-contract-0.8.json | 8 +- .../app/pages/components/mega-menu.wrn | 383 +++------------- .../app/pages/components/sidebar.wrn | 413 +++--------------- .../app/pages/components/tabs.wrn | 121 +++-- .../component-showcase/app/pages/index.wrn | 4 +- .../app/pages/navigation.wrn | 14 +- .../scripts/showcase-profiles.mjs | 151 +++++-- .../component-showcase/showcase-manifest.json | 22 +- packages/ui/COMPONENTS.md | 16 +- packages/ui/component-reference.json | 130 +++--- packages/ui/components/MegaMenu.wrn | 330 +++++++++++++- packages/ui/components/Sidebar.wrn | 351 ++++++++++++--- packages/ui/test/ui.test.ts | 96 +++- 13 files changed, 1151 insertions(+), 888 deletions(-) diff --git a/docs/ui-visual-contract-0.8.json b/docs/ui-visual-contract-0.8.json index 0f78d7af..89758c9b 100644 --- a/docs/ui-visual-contract-0.8.json +++ b/docs/ui-visual-contract-0.8.json @@ -61,11 +61,11 @@ "packages/ui/components/Map.wrn": "7b8a0d5412a464fd7cab8977d816542c506d8c5dab8230a3c984c2caee407c91", "packages/ui/components/MarketingSectionHeader.wrn": "7d6ffcc01a9331474475ea57ca58598be757abd9428b66bdfaf6f3603c5b145b", "packages/ui/components/Marquee.wrn": "b2b35eedf3297ba12ab3776385a9f3eab001027648d87a2a1968f576eee6c025", - "packages/ui/components/MegaMenu.wrn": "4a084eaf6aae77bb9023d2f3589bc6b80119b9be63982a90a80f9d280cc9c0a5", + "packages/ui/components/MegaMenu.wrn": "48f4ced485df0e8de5217630c8bdcec0b2317bf04e6b279399f2c93d98d56995", "packages/ui/components/MetricCard.wrn": "6451182739298691908f68258c0250cce2a78b0dc27c97115579ece30d7d9f92", "packages/ui/components/MetricGrid.wrn": "6018a98c10628ed240ed236ed916c0ff60994d192c3aadafd10bc876be0f9364", "packages/ui/components/Modal.wrn": "59d4ae9d6dd2700692d9edecfe53ee868e9f864363a4885961d1813cb2bee51f", - "packages/ui/components/Nav.wrn": "544483dbe7f2c3107c9c315ac0e7032c0989d8c7ad90e05a27ece12ac0652dfd", + "packages/ui/components/Nav.wrn": "7dc456b879e9248bde267b986cdcb138b8f3127d98b51e27bc9708129953f5e2", "packages/ui/components/Navbar.wrn": "e68f9d3643e500e43124e9c7a6d4c7f6722657377ea7313f3e3cf5093a81b360", "packages/ui/components/PageHeader.wrn": "0761235a4924eec09877be40b292d27b70db22d210be7d8e989493165c20df86", "packages/ui/components/Pagination.wrn": "9ceb74745b159150b015bbbb1974c68e14a7d4b92bd03491cb23b8855aa07983", @@ -82,14 +82,14 @@ "packages/ui/components/Section.wrn": "21485de07d8bb986837a65c61c5dd01ba6c2f3d4e37d58c154a584c7b58de0ed", "packages/ui/components/SectionHeader.wrn": "512cb96636ee1f0540a0f4b4c75603fc0fe7536e7ed7ed7dc82173a16f48a4d3", "packages/ui/components/Select.wrn": "7f046bb11b7c2470dae26d91a4b2261c66a40ae054d0e04c69b6748912d1e204", - "packages/ui/components/Sidebar.wrn": "05f4bd216ae8bfcee2460fe638e431174d5f3c8e10003f346644e5a2939e7ce5", + "packages/ui/components/Sidebar.wrn": "03f1bbce75ca6d50ed940e62df39c539610e89eadd2064fe24abc7d5470f98bf", "packages/ui/components/SplitHero.wrn": "70e843565ff869bcf413b11b6d9830b2e2bd229863a00904596f71e2dff0e76d", "packages/ui/components/StatsBar.wrn": "c7d1df3895f25b6d3a2e1012a18b97592c7f33e65418b880d486f20c2d490686", "packages/ui/components/Stepper.wrn": "09f216a44f888421091bd1bce760a076927500a573550d5b2b10c4f27f608e92", "packages/ui/components/StrongPassword.wrn": "c7c5ef26ece6170dd7db9882f0dc98cb2e4607f1e5d43eb3fd39e5d15bbd3a2e", "packages/ui/components/StyledIcon.wrn": "4a4504e357dee9dd0418edbe85fc90b824ccdb3752123a2125da95b77bf0b336", "packages/ui/components/Switch.wrn": "ccb74599fab72b0d68b09a7f1f90b7732cb2f9cbed67a84219e897575ce30c28", - "packages/ui/components/Tabs.wrn": "8a1b98c7395b27b09f16f0ebdc14d3d84473b06023ec2b3ed0af495cc2f076bb", + "packages/ui/components/Tabs.wrn": "29c0aacca730616002b7988308426e20b7a34abb9b249212d59d76190d89572f", "packages/ui/components/TextLink.wrn": "30782039293eb36d63b7b3a4f32a71a47177a3a68c7e90184be7cf7b4385eb19", "packages/ui/components/Textarea.wrn": "ddf0b4f124b2cf0c0ab3d820d3ac0085f7c20466e977231949be264cd0cee8cf", "packages/ui/components/TimePicker.wrn": "2e8e7a90f6b6069a07e7ffd2725ba1e1031e84d55a4f1254025befbb314fa695", diff --git a/examples/component-showcase/app/pages/components/mega-menu.wrn b/examples/component-showcase/app/pages/components/mega-menu.wrn index cb1baa2e..d1db2148 100644 --- a/examples/component-showcase/app/pages/components/mega-menu.wrn +++ b/examples/component-showcase/app/pages/components/mega-menu.wrn @@ -1,12 +1,13 @@ // Generated by scripts/generate-showcase.mjs. Do not edit directly. page MegaMenuDetail { layout = "showcase" - state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Mega Menu" - state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"mega-menu-0-1\",\"key\":\"mega-menu-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#mega-menu-demo\",\"actionHref\":\"#mega-menu-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"mega-menu-0-2\",\"key\":\"mega-menu-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#mega-menu-demo\",\"actionHref\":\"#mega-menu-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") - state playground_active = ctx.url.searchParams.get("pg_active") ?? "" - state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal" + state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" + state playground_columns = JSON.parse(ctx.url.searchParams.get("pg_columns") ?? "[{\"id\":\"mega-menu-0-1\",\"key\":\"mega-menu-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#mega-menu-demo\",\"actionHref\":\"#mega-menu-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"mega-menu-0-2\",\"key\":\"mega-menu-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#mega-menu-demo\",\"actionHref\":\"#mega-menu-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") + state playground_footer = ctx.url.searchParams.get("pg_footer") ?? "" + state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Mega Menu" @@ -21,7 +22,7 @@ page MegaMenuDetail { Navigation component

Mega Menu

Theme-aware, responsive mega menu component.

-
7 props1 slots3 outputsTheme readyResponsive
+
8 props1 slots3 outputsTheme readyResponsive
@@ -30,11 +31,12 @@ page MegaMenuDetail {
Live preview
-
+
Component code
<MegaMenu
-  items='[
+  label="Mega Menu"
+  columns='[
     {
       "id": "mega-menu-0-1",
       "key": "mega-menu-0-1",
@@ -148,8 +150,8 @@ page MegaMenuDetail {
           
Event outputInteract with the preview to inspect the typed payload.
-
Component props7 controls
-
+]
@@ -265,123 +267,49 @@ page MegaMenuDetail {
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

-
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+
Recommended

Grouped columns

One level deep by design: a mega menu shows breadth flat so everything is one click away. Nesting inside the panel would bury content behind hover-within-hover. Use Nav when you want cascading submenus.

01
Live preview
-
+
-
+
Component usage.wrn
<MegaMenu
-  items='[
+  label="Products"
+  icon="icon-[lucide--box]"
+  columns='[
     {
-      "id": "mega-menu-0-1",
-      "key": "mega-menu-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#mega-menu-demo",
-      "actionHref": "#mega-menu-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
+      "heading": "Platform",
       "items": [
         {
-          "label": "Nested option A",
-          "value": "nested-a"
+          "label": "Runtime",
+          "href": "/runtime",
+          "description": "The browser half of the framework."
         },
         {
-          "label": "Nested option B",
-          "value": "nested-b"
+          "label": "Compiler",
+          "href": "/compiler",
+          "description": "WRN to JavaScript."
         }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     },
     {
-      "id": "mega-menu-0-2",
-      "key": "mega-menu-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#mega-menu-demo",
-      "actionHref": "#mega-menu-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
+      "heading": "Tooling",
       "items": [
         {
-          "label": "Nested option A",
-          "value": "nested-a"
+          "label": "CLI",
+          "href": "/cli",
+          "description": "Scaffold, build and deploy."
         },
         {
-          "label": "Nested option B",
-          "value": "nested-b"
+          "label": "Editor",
+          "href": "/editor",
+          "description": "Language server and syntax."
         }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     }
   ]'
@@ -391,256 +319,57 @@ page MegaMenuDetail {
-
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+
Advanced

With a footer note

The panel is anchored, so the runtime clamp pulls it back inside the viewport instead of letting it hang off a wide layout. On a phone it stops floating and joins the flow.

02
Live preview
-
+
-
+
Component usage.wrn
<MegaMenu
   size="sm"
-  label="Compact example"
-  items='[
+  label="Solutions"
+  icon="icon-[lucide--arrow-right]"
+  columns='[
     {
-      "id": "mega-menu-1-1",
-      "key": "mega-menu-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#mega-menu-demo",
-      "actionHref": "#mega-menu-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
+      "heading": "By team",
       "items": [
         {
-          "label": "Nested option A",
-          "value": "nested-a"
+          "label": "Engineering",
+          "href": "/eng",
+          "icon": "icon-[lucide--code]"
         },
         {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
+          "label": "Design",
+          "href": "/design",
+          "icon": "icon-[lucide--palette]"
         },
         {
-          "label": "API reference",
-          "href": "#api-reference"
+          "label": "Support",
+          "href": "/support",
+          "icon": "icon-[lucide--life-buoy]"
         }
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     },
     {
-      "id": "mega-menu-1-2",
-      "key": "mega-menu-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#mega-menu-demo",
-      "actionHref": "#mega-menu-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
+      "heading": "By size",
       "items": [
         {
-          "label": "Nested option A",
-          "value": "nested-a"
+          "label": "Startup",
+          "href": "/startup"
         },
         {
-          "label": "Nested option B",
-          "value": "nested-b"
+          "label": "Enterprise",
+          "href": "/enterprise"
         }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    }
-  ]'
-/>
-
-
-
-
-
-
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

- 03 -
-
-
-
Live preview
- -
-
-
-
Component usage.wrn
- 
<MegaMenu
-  size="lg"
-  label="Advanced example"
-  items='[
-    {
-      "id": "mega-menu-2-1",
-      "key": "mega-menu-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#mega-menu-demo",
-      "actionHref": "#mega-menu-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    },
-    {
-      "id": "mega-menu-2-2",
-      "key": "mega-menu-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#mega-menu-demo",
-      "actionHref": "#mega-menu-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
       ]
     }
   ]'
+  footer="Not sure where to start? Talk to us."
 />
@@ -664,10 +393,10 @@ if (component) registerOutputHandler(component, "close", (payload) => & if (component) registerOutputHandler(component, "select", (payload) => { console.log("select", payload) })
-
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Mega Menu"No
itemsunknown[][]No
activestring""No
orientationstring"horizontal"No
classstring""No
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
colorstring"primary"No
sizestring"default"No
labelstring"Menu"No
iconstring""No
columnsunknown[][]No
footerstring""No
defaultOpenbooleanfalseNo
classstring""No