This dropdown menu is built with the Radix primitive: https://www.radix-ui.com/primitives/docs/components/dropdown-menu ### Example ```jsx <Widget src="near/widget/DIG.DropdownMenu" props={{ trigger: ( <Widget src="near/widget/DIG.Button" props={{ label: "Open Menu" }} /> ), header: "Dropdown header", items: [ { name: "Profile", iconLeft: "ph ph-user-circle", iconRight: "ph ph-user-focus", }, { subHeader: "Sub header here", name: "Settings", }, { name: "Groups", iconLeft: "ph ph-user-circle", subMenuProps: { items: [ { header: "Section header without divider", asSection: true, noDivider: true, items: [ { name: "Section name 1", }, { name: "Section name 2", }, ], }, { name: "Nested Profile", iconLeft: "ph ph-user-circle", iconRight: "ph ph-user-focus", }, { name: "Nested Groups Nested Groups", subMenuProps: { header: "My double nested Account", items: [ { name: "Menu item as link", href: "near.org", target: "_blank", iconRight: "ph ph-link", }, { header: "Section header 2", asSection: true, items: [ { name: "Section name 1", }, { name: "Section name 2", }, ], }, { header: "Section header 3", asSection: true, items: [ { name: "Section name 1", }, ], }, { name: "Double Nested Groups", }, { name: "Double Nested Settings", }, ], }, }, { name: "Nested Settings", }, ], }, }, ], }} /> ``` ### Props `trigger` - type: `JSX` - `required` - Renders the element that will display the dropdown menu when clicked. This element will be wrapped with a `<span>` styled with `display: inline-block;`. `header` - type: `string` - Adds title with divider line. `subHeader` - type: `string` - Same as `header` but without divider. `items` - type: `array` - `required` - An array of objects defining each menu item with props `items.name` - type: `string` - `required` - Dropdown menu text `items.onSelect` - type: `function` - Event handler called when the user selects an item (via mouse or keyboard). Calling `event.preventDefault` in this handler will prevent the dropdown menu from closing when selecting that item. `items.disabled` - type: `boolean` - When `true`, prevents the user from interacting with the item. `items.href` - type: `string` - Converts menu item to link. - example: ```jsx // ... items: [ { name: "Link item text", href: "https://near.org", }, // ... other items ] ``` `items.target` - type: `string`. Relates to `items.href` - Defines `target` for link `items.iconLeft` - type: `string` (CSS Class) - example: "ph-bold ph-anchor-simple" - https://phosphoricons.com - Adds an icon inside the left of the menu item `items.iconRight` - type: `string` (CSS Class) - example: "ph-bold ph-anchor-simple" - https://phosphoricons.com - Adds an icon inside the right of the menu item `items.asSection` - type: `boolean` - Defines given `items` as section and adds divider at the end of section. `items.noDivider ` - type: `boolean` - Controls section divider. `items.subMenuProps` - type: `object` - Defines submenu for `items.name`. Object structure are the same as component props. This component also accepts all `DropdownMenu.Root` props as outlined in the Radix documentation.