KDropdownMenu link to current page

develop | Release notes

Overview
#

Implements a 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.

Please see the Dropdown section of the Buttons and links page on the buttons page for more details about how to use with a button, and a code example.

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.

For example, you can right click on this paragraph to see a context menu.

Note that just one context menu can be open at a time. If you right-click on this paragraph, any other context menu will close.

To achieve this, set the isContextMenu prop to true. The context menu will then be attached to the parent element. 


      <div>
        <p> ... </p>
        <KDropdownMenu
          isContextMenu
          :options="[
            { label: 'Option 1' },
            { label: 'Option 2' },
            { label: 'Option 3' },
          ]"
        />
      </div>

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 —
position
#
The position of the dropdown relative to the button
 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 —

Events
#

Name Description
tab
#
 —
select
#
Emitted when an option is selected
close
#
 —

Slots
#

Name Description
header
#
 —