Menu

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

<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

// 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

CSS Properties

Slots