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>
Badge
menu itemnewmenu itemmenu itemmenu item
code
<script type="module">
import '@blueprintui/components/include/menu.js';
import '@blueprintui/components/include/badge.js';
import '@blueprintui/components/include/card.js';
</script>
<bp-card style="--width: fit-content">
<bp-menu>
<bp-menu-item>menu item <bp-badge status="accent">new</bp-badge></bp-menu-item>
<bp-menu-item>menu item</bp-menu-item>
<bp-menu-item>menu item</bp-menu-item>
<bp-menu-item>menu item</bp-menu-item>
</bp-menu>
</bp-card>
Links
code
<script type="module">
import '@blueprintui/components/include/menu.js';
</script>
<bp-menu>
<bp-menu-item><a href="#">menu item</a></bp-menu-item>
<bp-menu-item selected><a href="#">menu item</a></bp-menu-item>
<bp-menu-item disabled><a href="#">menu item</a></bp-menu-item>
<bp-menu-item><a href="#">menu item</a></bp-menu-item>
</bp-menu>
Dropdown
code
<script type="module">
import '@blueprintui/components/include/menu.js';
import '@blueprintui/components/include/button.js';
import '@blueprintui/components/include/divider.js';
import '@blueprintui/components/include/dropdown.js';
</script>
<div bp-layout="block center" style="height: 450px">
<bp-button id="dropdown-menu-anchor" popovertarget="dropdown-menu">Open Dropdown</bp-button>
<bp-dropdown id="dropdown-menu" anchor="dropdown-menu-anchor">
<bp-menu>
<bp-menu-item>Account</bp-menu-item>
<bp-menu-item>Reports</bp-menu-item>
<bp-menu-item>Profile Settings</bp-menu-item>
<bp-divider></bp-divider>
<bp-menu-item>Logout <bp-icon shape="logout" style="margin-left: auto"></bp-icon></bp-menu-item>
</bp-menu>
</bp-dropdown>
</div>
<script type="module">
import '@blueprintui/components/include/dropdown.js';
import '@blueprintui/components/include/menu.js';
import '@blueprintui/components/include/button.js';
import '@blueprintui/components/include/divider.js';
import '@blueprintui/icons/shapes/logout.js';
</script>
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 |