Dropdown

BsDropdown renders nothing itself: bind its props on the trigger, and its content slot opens at the end of <body>. The trigger is a menu button: a click toggles it, ArrowDown and ArrowUp open it on the first and the last item. Escape, a click outside, tabbing out or choosing an item closes it, and focus returns to the trigger. placement is bottom-start (the default), bottom-end, top-start or top-end; it flips when there is no room.

Any content

With has-popup="dialog" the panel holds content that is not a menu and takes focus itself.

A menu in place

BsDropdownMenu works on its own too; give it a label.

Source

<BsDropdown>  <template #default="{ props }">    <button type="button" class="btn btn-primary" v-bind="props">Actions</button>  </template>  <template #content>    <BsDropdownMenu @item-select="({ value }) => (chosen = value)">      <BsDropdownHeader>File</BsDropdownHeader>      <BsDropdownItem value="new">New</BsDropdownItem>      <BsDropdownItem value="save" disabled>Save</BsDropdownItem>      <BsDropdownDivider />      <BsDropdownItem><a href="https://getbootstrap.com">Bootstrap</a></BsDropdownItem>    </BsDropdownMenu>  </template></BsDropdown>