{ "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-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-icons", "name": "Icons", "template": "\n profile\n settings\n favorites\n logout\n\n", "summary": "Menu items with icons to add visual context and improve usability.", "description": "", "composition": false, "tags": [] }, { "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 CMD + 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-drawer", "name": "VerticalNavigationDrawer", "template": "\n \n NV\n

NVIDIA

\n \n
\n toggle drawer\n
\n \n \n

Drawer

\n \n \n \n item 1\n item 2\n item 3\n item 4\n \n \n \n\n", "summary": "Use a navigation drawer to overlay page content for out-of-context navigation.", "description": "", "composition": true, "tags": [ "pattern" ] }, { "id": "menu-vertical-navigation-panel", "name": "VerticalNavigationPanel", "template": "\n \n NV\n

NVIDIA

\n \n \n \n

Drawer

\n \n \n \n item 1\n item 2\n item 3\n item 4\n \n \n \n
\n

Content

\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": [] } ] }