The menu component provides a hierarchical view of available options, allowing users to choose from a variety of actions. Each option should have clear, descriptive text that helps the user understand what the option does.
Example
menu itemitem selecteditem disabledmenu itemmenu itemitem selecteditem disabledmenu item
code
<script type="module">
import '@blueprintui/components/include/menu.js';
import '@blueprintui/components/include/card.js';
</script>
<div bp-layout="inline gap:lg">
<bp-menu>
<bp-menu-item>menu item</bp-menu-item>
<bp-menu-item selected>item selected</bp-menu-item>
<bp-menu-item disabled>item disabled</bp-menu-item>
<bp-menu-item>menu item</bp-menu-item>
</bp-menu>
<bp-card>
<bp-menu>
<bp-menu-item>menu item</bp-menu-item>
<bp-menu-item selected>item selected</bp-menu-item>
<bp-menu-item disabled>item disabled</bp-menu-item>
<bp-menu-item>menu item</bp-menu-item>
</bp-menu>
</bp-card>
</div>
Install
NPM
import '@blueprintui/components/include/menu.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/menu.js/+esm';
</script>
Accessibility
- Keyboard navigation should be provided, allowing users to move through the options with the arrow keys and activate an option with the enter key.
- Provide visual cues such as hover styles to indicate when an option is focused by the keyboard or mouse.
Properties
Name | Types | Description |
items |
| |
CSS Properties
Name | Types | Description |
--background |
| |
--color |
| |
--width |
| |
Slots
Name | Types | Description |
default |
| content |