KDropdownMenu link to current page

release-v5 | Release notes

Overview
#

Dropdown set of options, based on Keen's UI Menu. See these docs to understand the current implementation of the options object array. Notable possible for configuring the menu include icons, text, secondary text, and dividers.

Usage
#

Button with dropdown
#

Icon button with dropdown
#

Options with icons
#

Context menu
#

This component can be also used to create a context menu, which is a dropdown menu that appears when a user right-clicks on an element. The context menu will then be attached to the parent element.

Custom option slot
#

Use the #option scoped slot to customize each menu item. The slot provides the option object via the option prop.

Closing the menu programmatically
#

Call closePopover() through a ref to close an open menu, for example when its trigger is hidden. It also resets the trigger's aria-expanded.

Focus moves to the element focused before the menu opened. When that element is hidden, move focus to a visible element yourself. 


      <KButton
        text="Options"
        hasDropdown
      >
        <template #menu>
          <KDropdownMenu
            ref="menu"
            :options="options"
          />
        </template>
      </KButton>
    

      this.$refs.menu.closePopover();

Props
#

Name Description Type Default Required
constrainToScrollParent
#
The dropdown menu popover flips its position to avoid overflows within the parent. Setting it to false disables the flipping behavior.
 boolean true —
options
#
An array of options objects, with one object per dropdown item
 array — true
hasIcons
#
Whether or not the options display an icon
 boolean false —
maxWidth
#
Maximum width for the dropdown menu
 number|string null —
position
#
The position of the dropdown relative to the button, or to the cursor for context menus. The first word is the side it opens on; the second is the direction it extends, so 'bottom right' aligns its left edge with the button's. left and right mirror in RTL.
 string 'bottom right' —
isContextMenu
#
Whether or not the dropdown is a context menu, if true, the dropdown will open when the user right-clicks the parent element
 boolean false —
hideOnClick
#
Private. Do not use.
 boolean true —

Events
#

Name Description
tab
#
 —
select
#
Emitted when an option is selected
close
#
Emitted when the menu is closed by closePopover, an option selection, or Tab

Slots
#

Name Description
header
#
 —
option
#
Optional slot to customize the rendering of each menu option

Methods
#

Name Description
closePopover
#
Closes the menu, emits close and resets the trigger's aria-expanded. Does nothing if the menu is already closed.