Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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

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

NameTypesDescription
items

CSS Properties

NameTypesDescription
--background
--color
--width

Slots

NameTypesDescription
defaultcontent