Dropdown

Table of Contents
Examples
Basic Usage
With Icons
Open Direction
Disabled Items
Using Links
Events
JavaScript Reference
Constructor
Requirements
Attributes
Methods
Events

Basic Usage

Create dropdown menus using the k-dropdown component. Use the trigger slot for the button that opens the menu, and place <button> or <a> elements as children for menu items.

<k-dropdown>
  <button slot="trigger">Actions</button>
  <button data-value="edit">Edit</button>
  <button data-value="duplicate">Duplicate</button>
  <button data-value="delete">Delete</button>
</k-dropdown>

With Icons

Add icons to your dropdown items for better visual cues.

<k-dropdown>
  <button slot="trigger">
    <k-icon name="more_vert"></k-icon>
  </button>
  <button data-value="edit">
    <k-icon name="edit"></k-icon> Edit
  </button>
  <button data-value="copy">
    <k-icon name="copy"></k-icon> Copy
  </button>
  <button data-value="delete" class="tc-danger">
    <k-icon name="delete"></k-icon> Delete
  </button>
</k-dropdown>

Open Direction

Control where the menu appears using the open-direction attribute. Specify a direction like down left, up right, left up, etc. The browser automatically handles fallback positioning if the menu would overflow the viewport using CSS Anchor Positioning.

<k-dropdown open-direction="down left">...</k-dropdown>
<k-dropdown open-direction="down right">...</k-dropdown>
<k-dropdown open-direction="up left">...</k-dropdown>
<k-dropdown open-direction="right down">...</k-dropdown>

Disabled Items

Add the disabled attribute to disable specific items.

<k-dropdown>
  <button slot="trigger">Actions</button>
  <button data-value="edit">Edit</button>
  <button data-value="copy" disabled>Copy (disabled)</button>
  <button data-value="delete">Delete</button>
</k-dropdown>

You can use <a> elements for navigation items.

<k-dropdown>
  <button slot="trigger">Navigate</button>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</k-dropdown>
Home About Contact

Events

Listen for the select event to handle item selection.

<k-dropdown id="eventDropdown">
  <button slot="trigger">Select an option</button>
  <button data-value="option1">Option 1</button>
  <button data-value="option2">Option 2</button>
  <button data-value="option3">Option 3</button>
</k-dropdown>
<p id="selectedValue">Selected: none</p>
<script>
  document.getElementById('eventDropdown')
    .addEventListener('select', e => {
      document.getElementById('selectedValue')
        .textContent = 'Selected: ' + e.detail.value;
    });
</script>

Selected: none

JavaScript Reference

Constructor

Extends ShadowComponent
new Dropdown()

Requirements

Attributes

opened: boolean

Whether the dropdown menu is currently open.

open-direction: string

Where the menu appears relative to the trigger. Specify two directions like down left, up right, left up, right down, etc. The browser will automatically flip the position if the menu would overflow the viewport using CSS Anchor Positioning. Default is down left.

close-on-select: boolean

Whether the dropdown closes when an item is selected. Default is true.

close-on-click-outside: boolean

Whether the dropdown closes when clicking outside of it. Default is true.

Methods

open(): this

Opens the dropdown menu and focuses the first item.

close(): this

Closes the dropdown menu.

toggle(): this

Toggles the dropdown menu open or closed.

Events

select

Fired when an item is selected. The event detail contains:

opened

Fired when the dropdown menu is opened.

closed

Fired when the dropdown menu is closed.

Keyboard Navigation