BwMenu | bw-menu

Overview

Menus are sued to display a list of BwOption's. They can be static or they can dynamically generate options via the dataSource prop. They can have selected option/s.

Usage

Example

Open Menu

Header

UndoRedoCutCopyPasteOpen Menu with Type Select

Header

UndoRedoCutCopyPasteOpen Menu with Type Multiselect

Header

UndoRedoCutCopyPaste

<div style="display: flex; gap: 8px; padding-bottom: 8px;">
    <bw-popover placement="top">
        <bw-button slot="trigger">Open Menu</bw-button>
        <bw-menu>
            <h4>Header</h4>
            <bw-option>Undo</bw-option>
            <bw-option>Redo</bw-option>
            <bw-divider></bw-divider>
            <bw-option>Cut</bw-option>
            <bw-option>Copy</bw-option>
            <bw-option>Paste</bw-option>
        </bw-menu>
    </bw-popover>
    <bw-popover placement="top">
        <bw-button slot="trigger">Open Menu with Type Select</bw-button>
        <bw-menu type="select">
            <h4>Header</h4>
            <bw-option>Undo</bw-option>
            <bw-option>Redo</bw-option>
            <bw-divider></bw-divider>
            <bw-option>Cut</bw-option>
            <bw-option>Copy</bw-option>
            <bw-option>Paste</bw-option>
        </bw-menu>
    </bw-popover>
    <bw-popover placement="top">
        <bw-button slot="trigger">Open Menu with Type Multiselect</bw-button>
        <bw-menu type="multiselect">
            <h4>Header</h4>
            <bw-option>Undo</bw-option>
            <bw-option>Redo</bw-option>
            <bw-divider></bw-divider>
            <bw-option>Cut</bw-option>
            <bw-option>Copy</bw-option>
            <bw-option>Paste</bw-option>
        </bw-menu>
    </bw-popover>
</div>

Properties

Property	Attribute	Description	Type	Default
dataSource	data-source	Data source for lazy loading options	DataSource	undefined
options	options	The options to display in the menu	{ value: string; text: string; displayValue?: string; }[]	[]
type	type	The type of the menu	"multiselect" | "select"	undefined
value	value	The value of the menu	string | string[]	undefined

Events

Event	Description	Type
valueChange	Emitted when the value of the menu changes	CustomEvent<string | string[]>

Methods

focus() => Promise<void>

Focuses the first option in the menu

Returns

Type: Promise<void>

refreshDataSource() => Promise<void>

Re-triggers the data source and refreshes the dropdown options.

Returns

Type: Promise<void>

Slots

Slot	Description
	If not using a dataSource or manually providing options, there will be a default slot for content to be slotted into.

Dependencies

Used by

• bw-map-search

Depends on

• bw-badge
• bw-icon
• bw-option
• bw-infinite
• bw-loading

Graph

---

© 2025 United Systems & Software - All Rights Reserved.