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
Displays a list of actionable menu options or navigation links.
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
Shows menu items with badges for notifications or counts.
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
Demonstrates menu with navigation 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
Shows menu integrated within a dropdown component.
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
// npm package
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.
bp-menu
Properties
| Name | Types | Description |
|---|---|---|
items |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background | ||
--color | ||
--width |
Slots
| Name | Types | Description |
|---|---|---|
default | content |