{
"element": "nve-menu",
"entrypoint": "@nvidia-elements/core/menu/menu.examples.json",
"items": [
{
"id": "menu",
"name": "Default",
"template": "\n item 1\n item 2\n item 3\n item 4\n\n",
"summary": "Basic menu with simple text items for the default menu structure and styling.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "menu-content-slots",
"name": "ContentSlots",
"template": "\n Code \n Lint \n CLI \n Profile \n Access \n\n",
"summary": "Menu items with content slots for icons, dots, and other elements.",
"description": "",
"composition": true,
"tags": [
"test-case"
]
},
{
"id": "menu-compact",
"name": "Compact",
"template": "\n \n \n\n\n Code\n Lint\n CLI\n Profile\n Access\n\n\n",
"summary": "Dynamically toggle the compact state of a menu.",
"description": "",
"composition": true,
"tags": [
"test-case"
]
},
{
"id": "menu-expanded-navigation",
"name": "ExpandedNavigation",
"template": "\n Resources\n \n Documentation\n Examples\n \n\n",
"summary": "An explicitly expanded group keeps navigation state controlled by the application without enabling automatic state changes. Use when the application owns expansion state.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "menu-unavailable-navigation",
"name": "UnavailableNavigation",
"template": "\n Provisioning\n \n Clusters\n Storage\n \n\n",
"summary": "A disabled menu-group header preserves its current expanded content while preventing user toggling. Use when group availability depends on application state.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "menu-dropdown",
"name": "Dropdown",
"template": "dropdown\n\n \n profile\n settings\n favorites\n \n logout\n \n\n",
"summary": "Menu with keyboard navigation and ARIA disclosure pattern inside a dropdown. Use when menu items need accessible focus management and arrow key navigation.",
"description": "",
"composition": true,
"tags": [
"pattern"
]
},
{
"id": "menu-selected",
"name": "Selected",
"template": "\n item 1\n item 2\n item 3\n item 4\n\n",
"summary": "Menu with a selected item showing the visual state for user-selected options.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "menu-current",
"name": "Current",
"template": "\n item 1\n item 2\n item 3\n item 4\n\n",
"summary": "Menu with a current page item showing the visual state for the active/current page in navigation.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "menu-border-background",
"name": "BorderBackground",
"template": "\n item 1\n item 2\n item 3\n item 4\n\n",
"summary": "By default Menu will show a blue border on the selected item. You can change the border color by setting `--border-background` on the ``",
"description": "",
"composition": false,
"tags": [
"test-case"
]
},
{
"id": "menu-disabled",
"name": "Disabled",
"template": "\n item 1\n item 2\n item 3\n item 4\n\n",
"summary": "Menu with disabled items showing unavailable options while maintaining visual context.",
"description": "",
"composition": false,
"tags": [
"test-case"
]
},
{
"id": "menu-links",
"name": "Links",
"template": "\n profile\n settings\n favorites\n logout\n\n",
"summary": "Menu items with links for navigation functionality within menu structures.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "menu-suffix",
"name": "Suffix",
"template": "\n CopyCMD + C\n\n",
"summary": "Menu item features a default slot for content, along with a suffix slot for displaying elements such as keyboard shortcuts at the end of the menu item container.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "menu-scroll",
"name": "Scroll",
"template": "\n item 1\n item 2\n item 3\n item 4\n item 5\n item 6\n\n",
"summary": "Menu with constrained height showing scrollable behavior when content exceeds container limits.",
"description": "",
"composition": false,
"tags": [
"test-case"
]
},
{
"id": "menu-complex",
"name": "Complex",
"template": "dropdown\n\n \n \n \n \n Db Debugger \n TM Task Manager \n CI CI Services \n \n NV All Apps \n \n\n",
"summary": "Use a dropdown menu with search and branded logos for application selection interfaces.",
"description": "",
"composition": true,
"tags": [
"pattern"
]
},
{
"id": "menu-vertical-navigation",
"name": "VerticalNavigation",
"template": "
\n \n \n
\n",
"summary": "Vertical navigation menu groups with and without icons. For deeply nested navigation use the `nve-tree` component.",
"description": "",
"composition": false,
"tags": []
},
{
"id": "menu-vertical-navigation-drawer",
"name": "VerticalNavigationDrawer",
"template": "\n \n NV\n
\n \n\n",
"summary": "Use an inline navigation panel to push page content aside when navigation is contextual to the page.",
"description": "",
"composition": true,
"tags": [
"pattern"
]
},
{
"id": "menu-item-tooltip",
"name": "ItemTooltip",
"template": "\n item 1\n \n item 2\n \n This is a warning tooltip\n \n item 3\n\n",
"summary": "Use a tooltip on a menu item to provide extra context and warnings.",
"description": "",
"composition": true,
"tags": [
"pattern",
"test-case"
]
},
{
"id": "menu-danger-status",
"name": "DangerStatus",
"template": "\n default\n disabled\n selected\n current\n icon left\n icon right \n\n",
"summary": "Menu items with danger status styling for destructive actions like delete or logout operations.",
"description": "",
"composition": false,
"tags": []
}
]
}