{
  "element": "nve-dropdown-group",
  "entrypoint": "@nvidia-elements/core/dropdown-group/dropdown-group.examples.json",
  "items": [
    {
      "id": "dropdown-group",
      "name": "Default",
      "template": "<nve-button popovertarget=\"menu-1\">menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"menu-2\">\n        item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item popovertarget=\"menu-3\">\n        item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item>item 2-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
      "summary": "Cascading dropdown menu group with nested submenus for hierarchical navigation.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "dropdown-group-with-disabled-items",
      "name": "WithDisabledItems",
      "template": "<nve-button popovertarget=\"disabled-menu-1\">Disabled Items</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"disabled-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"disabled-menu-2\">\n        item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item disabled>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"disabled-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item disabled>item 2-2</nve-menu-item>\n      <nve-menu-item popovertarget=\"disabled-menu-3\">\n        item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"disabled-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item disabled>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
      "summary": "Cascading dropdown menu with disabled menu items in non-interactive states.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "dropdown-group-with-icons",
      "name": "WithIcons",
      "template": "<nve-button popovertarget=\"icon-menu-1\">Icons Menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"icon-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"icon-menu-2\">\n        <nve-icon name=\"folder\" size=\"sm\"></nve-icon> item 1-1\n        <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"image\" size=\"sm\"></nve-icon> item 1-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"video-camera\" size=\"sm\"></nve-icon> item 1-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"icon-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-2 </nve-menu-item>\n      <nve-menu-item popovertarget=\"icon-menu-3\">\n        <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 2-3\n        <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"icon-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
      "summary": "Cascading dropdown menu with leading icons for visual identification of menu item types.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "dropdown-group-with-more-icons",
      "name": "WithMoreIcons",
      "template": "<nve-button popovertarget=\"more-icon-menu-1\">More Icons</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"more-icon-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"more-icon-menu-2\">\n        <nve-icon name=\"person\" size=\"sm\"></nve-icon> item 1-1\n        <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"arrow\" direction=\"right\" size=\"sm\"></nve-icon> item 1-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"star\" size=\"sm\"></nve-icon> item 1-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"more-icon-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"flag\" size=\"sm\"></nve-icon> item 2-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"home\" size=\"sm\"></nve-icon> item 2-2 </nve-menu-item>\n      <nve-menu-item popovertarget=\"more-icon-menu-3\">\n        <nve-icon name=\"gear\" size=\"sm\"></nve-icon> item 2-3\n        <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"more-icon-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"dot\" size=\"sm\"></nve-icon> item 3-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"exclamation-mark\" size=\"sm\"></nve-icon> item 3-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"edit\" size=\"sm\"></nve-icon> item 3-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
      "summary": "Cascading dropdown menu showcasing extra icon varieties for diverse menu actions.",
      "description": "",
      "composition": true,
      "tags": []
    }
  ]
}