Menu
Menus of actions and links, Bootstrap 6’s replacement for dropdowns, positioned with Floating UI.
Bootstrap’s menu docs describe the markup and CSS.
Example
Pass the menu’s template reference to bsMenuToggle. ArrowDown and ArrowUp on the toggle open the menu and focus the first or last .menu-item; Escape closes it and returns focus to the toggle.
<button type="button" bsButton theme="primary" [bsMenuToggle]="menu">Toggle menu</button>
<div bsMenu #menu="bsMenu">
<button type="button" class="menu-item">Menu item 1</button>
<button type="button" class="menu-item">Menu item 2</button>
<button type="button" class="menu-item">Menu item 3</button>
</div>Menu content
Use .menu-header, .menu-divider, .active, disabled items, themes and .menu-translucent. Arrow keys skip disabled items.
<button type="button" bsButton theme="secondary" [bsMenuToggle]="menu">Options</button>
<div bsMenu #menu="bsMenu" class="menu-translucent">
<div class="menu-header">Document</div>
<button type="button" class="menu-item active">Edit</button>
<button type="button" class="menu-item">Duplicate</button>
<button type="button" class="menu-item" disabled>Share (disabled)</button>
<hr class="menu-divider" />
<button type="button" class="menu-item theme-danger">Delete</button>
</div>Placement and closing
Set placement to position the menu, and autoClose to choose which clicks close it: true, 'inside', 'outside' or false.
<div class="d-flex flex-wrap gap-2">
<button type="button" bsButton theme="secondary" [bsMenuToggle]="up">Drop up</button>
<div bsMenu #up="bsMenu" placement="top-start">
<button type="button" class="menu-item">Action</button>
<button type="button" class="menu-item">Another action</button>
</div>
<button type="button" bsButton theme="secondary" [bsMenuToggle]="end">Aligned to end</button>
<div bsMenu #end="bsMenu" placement="bottom-end">
<button type="button" class="menu-item">Action</button>
<button type="button" class="menu-item">Another action</button>
</div>
<button type="button" bsButton theme="secondary" [bsMenuToggle]="outside">
Closes on outside click
</button>
<div bsMenu #outside="bsMenu" autoClose="outside">
<button type="button" class="menu-item">Clicking me keeps the menu open</button>
<button type="button" class="menu-item">So does this</button>
</div>
</div>Submenus
Wrap a .menu-item trigger and a nested .menu in an element with bsSubmenu. Submenus open on hover or click, and with ArrowRight (ArrowLeft in right-to-left pages); ArrowLeft or Escape closes them and returns focus to the trigger. They can be nested, and flip to the other side when there is no room. Set [hover]="false" to open a submenu only on click and keyboard.
<button type="button" bsButton theme="secondary" [bsMenuToggle]="menu">File</button>
<div bsMenu #menu="bsMenu">
<button type="button" class="menu-item">New</button>
<div bsSubmenu>
<button type="button" class="menu-item">Open recent</button>
<div class="menu">
<button type="button" class="menu-item">report.pdf</button>
<button type="button" class="menu-item">budget.xlsx</button>
<div bsSubmenu>
<button type="button" class="menu-item">More</button>
<div class="menu">
<button type="button" class="menu-item">notes.txt</button>
<button type="button" class="menu-item">todo.md</button>
</div>
</div>
</div>
</div>
<div bsSubmenu>
<button type="button" class="menu-item">Export as</button>
<div class="menu">
<button type="button" class="menu-item">PDF</button>
<button type="button" class="menu-item">HTML</button>
</div>
</div>
<hr class="menu-divider" />
<button type="button" class="menu-item">Close</button>
</div>API
BsMenu
Selector: [bsMenu] · Exported as: bsMenu
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Whether the menu is open. Supports [(open)]. |
placement | BsPlacement | 'bottom-start' | Where the menu appears next to its toggle. |
autoClose | boolean | 'inside' | 'outside' | true | Which clicks close the menu. |
id | string | generated | Element id, used for aria-controls on the toggle. |
Outputs
| Name | Type | Description |
|---|---|---|
openChange | boolean | Emits when the menu opens or closes from inside. |
shown | void | Emits after the menu is shown. |
hidden | void | Emits after the menu is hidden. |
Methods
| Name | Type | Description |
|---|---|---|
show(focus?) | void | Opens the menu. Pass 'first' or 'last' to focus that item. |
hide() | void | Closes the menu. |
toggle() | void | Toggles the menu. |
isOpen | Signal<boolean> | Current open state. |
BsMenuToggle
Selector: [bsMenuToggle]
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
bsMenuToggle | BsMenu | required | The menu to toggle. |
BsSubmenu
Selector: [bsSubmenu] · Exported as: bsSubmenu
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
hover | boolean | true | Opens the submenu on hover as well as on click and keyboard. |
Methods
| Name | Type | Description |
|---|---|---|
open() | void | Opens the submenu. |
close() | void | Closes the submenu and its submenus. |
isOpen | Signal<boolean> | Current open state. |