kris/afv-library
1
0
Fork 0
mirror of https://github.com/forcedotcom/afv-library.git synced 2026-07-30 03:09:50 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
2c6aefabd7
afv-library/skills/design-systems-slds-apply/assets/blueprints/components/dynamic-menu.yaml

142 lines
7.7 KiB
YAML
Raw Blame History

name: Dynamic Menu
description: A menu component that displays contextual navigation or actions in a popover dialog. It provides a flexible container
for menu items with header and footer support, typically triggered by a button or other interaction.
category: Navigation
slds_classes:
root: slds-dynamic-menu
elements:
- class: slds-dynamic-menu__header
description: Header section of the dynamic menu
purpose: Contains the menu title or heading
modifiers: []
states: []
variants:
- name: Base
description: Standard dynamic menu in popover
classes:
- slds-dynamic-menu
usage_context: Default menu implementation with header and footer support
differences: Displayed in a popover dialog with role='dialog'
lightning_component:
name: lightning-menu
url: https://developer.salesforce.com/docs/component-library/bundle/lightning-menu
mapping_notes: lightning-menu provides dynamic menu functionality with menu items
accessibility:
keyboard_support:
- Tab to navigate between menu items
- Arrow keys to move through menu options
- Enter or Space to select menu item
- Escape to close menu
screen_reader:
- Dialog role announced
- Menu header announced
- Menu items announced as clickable actions
- Current selection state communicated
aria_attributes:
- role='dialog' on menu container
- aria-labelledby pointing to menu header
- aria-describedby for additional context
- Focus management when opening/closing
usage_guidelines:
when_to_use:
- For contextual navigation menus
- When menu content changes based on context
- For action menus triggered by buttons
- When you need a menu with header and footer
when_not_to_use:
- For simple dropdown select (use select or combobox)
- For static navigation (use standard menu)
- When content doesn't change dynamically
- For very simple action lists (use dropdown menu)
best_practices:
- Provide clear, descriptive header text
- Group related menu items logically
- Use appropriate icons for menu items
- Ensure proper focus management
- Close menu on selection or Escape key
- Position menu appropriately relative to trigger
common_mistakes:
- Missing dialog role for accessibility
- Poor keyboard navigation support
- Not managing focus properly
- Unclear menu item labels
- Menu not closing on selection
code_examples:
- title: Basic Dynamic Menu
code: "<section class=\"slds-popover slds-dynamic-menu slds-nubbin_top-left\" role=\"dialog\" aria-labelledby=\"menu-header\"\
\ aria-describedby=\"menu-body\">\n <div class=\"slds-popover__header\">\n <h3 id=\"menu-header\" class=\"slds-dynamic-menu__header\"\
>Menu Options</h3>\n </div>\n <div id=\"menu-body\" class=\"slds-popover__body\">\n <ul class=\"\" role=\"menu\"\
>\n <li class=\"slds-dropdown__item\" role=\"presentation\">\n <a href=\"#\" role=\"menuitem\" tabindex=\"\
0\">\n <span class=\"slds-truncate\" title=\"Menu Item 1\">Menu Item 1</span>\n </a>\n </li>\n \
\ <li class=\"slds-dropdown__item\" role=\"presentation\">\n <a href=\"#\" role=\"menuitem\" tabindex=\"-1\"\
>\n <span class=\"slds-truncate\" title=\"Menu Item 2\">Menu Item 2</span>\n </a>\n </li>\n \
\ <li class=\"slds-dropdown__item\" role=\"presentation\">\n <a href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n\
\ <span class=\"slds-truncate\" title=\"Menu Item 3\">Menu Item 3</span>\n </a>\n </li>\n </ul>\n\
\ </div>\n</section>\n"
description: Basic dynamic menu with header and menu items
- title: Dynamic Menu with Footer
code: "<section class=\"slds-popover slds-dynamic-menu slds-nubbin_top\" role=\"dialog\" aria-labelledby=\"menu-header-2\"\
\ aria-describedby=\"menu-body-2\">\n <div class=\"slds-popover__header\">\n <h3 id=\"menu-header-2\" class=\"slds-dynamic-menu__header\"\
>Actions</h3>\n </div>\n <div id=\"menu-body-2\" class=\"slds-popover__body\">\n <ul class=\"\" role=\"menu\">\n\
\ <li class=\"slds-dropdown__item\" role=\"presentation\">\n <a href=\"#\" role=\"menuitem\" tabindex=\"0\"\
>\n <span class=\"slds-truncate\" title=\"Action 1\">Action 1</span>\n </a>\n </li>\n <li class=\"\
slds-dropdown__item\" role=\"presentation\">\n <a href=\"#\" role=\"menuitem\" tabindex=\"-1\">\n <span\
\ class=\"slds-truncate\" title=\"Action 2\">Action 2</span>\n </a>\n </li>\n </ul>\n </div>\n <div class=\"\
slds-popover__footer\">\n <a href=\"#\" class=\"slds-text-link\">View All</a>\n </div>\n</section>\n"
description: Dynamic menu with header, items, and footer link
- title: Dynamic Menu with Icons
code: "<section class=\"slds-popover slds-dynamic-menu slds-nubbin_top-right\" role=\"dialog\" aria-labelledby=\"menu-header-3\"\
>\n <div class=\"slds-popover__header\">\n <h3 id=\"menu-header-3\" class=\"slds-dynamic-menu__header\">Document Actions</h3>\n\
\ </div>\n <div class=\"slds-popover__body\">\n <ul class=\"\" role=\"menu\">\n <li class=\"slds-dropdown__item\"\
\ role=\"presentation\">\n <a href=\"#\" role=\"menuitem\" tabindex=\"0\">\n <span class=\"slds-icon_container\
\ slds-icon-utility-download slds-m-right_x-small\">\n <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"\
true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#download\"></use>\n </svg>\n\
\ </span>\n <span class=\"slds-truncate\" title=\"Download\">Download</span>\n </a>\n </li>\n\
\ <li class=\"slds-dropdown__item\" role=\"presentation\">\n <a href=\"#\" role=\"menuitem\" tabindex=\"-1\"\
>\n <span class=\"slds-icon_container slds-icon-utility-share slds-m-right_x-small\">\n <svg class=\"\
slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#share\"\
></use>\n </svg>\n </span>\n <span class=\"slds-truncate\" title=\"Share\">Share</span>\n\
\ </a>\n </li>\n <li class=\"slds-dropdown__item\" role=\"presentation\">\n <a href=\"#\" role=\"\
menuitem\" tabindex=\"-1\">\n <span class=\"slds-icon_container slds-icon-utility-delete slds-m-right_x-small\"\
>\n <svg class=\"slds-icon slds-icon_x-small\" aria-hidden=\"true\">\n <use xlink:href=\"/assets/icons/utility-sprite/svg/symbols.svg#delete\"\
></use>\n </svg>\n </span>\n <span class=\"slds-truncate\" title=\"Delete\">Delete</span>\n\
\ </a>\n </li>\n </ul>\n </div>\n</section>\n"
description: Dynamic menu with icons next to menu items
styling_hooks: []
dependencies:
css_files:
- dynamic-menu.css
- popover.css
- dropdown.css
javascript:
- Menu open/close management
- Keyboard navigation
- Focus management
- Click outside to close
icons:
- Various utility icons for menu items
other_components:
- popover
- dropdown
- menu
related_components:
- name: Menu
relationship: parent
description: Base menu component
- name: Dropdown
relationship: similar
description: Alternative menu pattern for simpler use cases
- name: Popover
relationship: container
description: Popover container for the menu
references:
official_docs: https://v1.lightningdesignsystem.com/components/dynamic-menu/
metadata:
version: 1.0.0
last_updated: '2025-11-11'
author: SLDS Documentation Team
slds_version: 2.27.2
review_status: complete
source: official-slds
notes: Created from official SLDS documentation and design-system-internal source code
Reference in New Issue View Git Blame Copy Permalink