Dropdown

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>

Sub Menus

Nest a k-dropdown inside another k-dropdown to create sub menus. The nested dropdown is automatically detected as a submenu: it opens on hover or focus, displays a chevron icon, and opens to the right by default. Keyboard navigation supports ArrowRight to open and ArrowLeft to close sub menus.

<k-dropdown>
  <button slot="trigger">Actions</button>
  <button data-value="edit">Edit</button>
  <k-dropdown>
    <button slot="trigger">Share</button>
    <button data-value="email">Email</button>
    <button data-value="link">Copy Link</button>
  </k-dropdown>
  <button data-value="delete">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>

Using Links

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>

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>

Hover

Add the hover attribute to open the menu when the trigger is hovered instead of clicked. The menu closes automatically 150ms after the cursor leaves the component.

<k-dropdown hover>
  <button slot='trigger'>Hover Me</button>
  <button data-value='edit'>Edit</button>
  <button data-value='copy'>Copy</button>
  <button data-value='delete'>Delete</button>
</k-dropdown>

JavaScript Reference

Constructor

Extends ShadowComponent

new Dropdown()

Requirements

• ShadowComponent
• Icon (required for sub menus)

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.

submenu: boolean

Automatically set to true when a k-dropdown is nested inside another k-dropdown. Sub menus open on hover/focus, display a chevron icon, and default to open-direction="right down". Supports ArrowRight to open and ArrowLeft to close via keyboard.

hover: boolean

When present, the menu opens on mouseenter instead of trigger click. The menu closes 150ms after the cursor leaves the component. Default is false.

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:

• value: The value of the selected item (from data-value attribute or text content)
• item: The DOM element that was selected

opened

Fired when the dropdown menu is opened.

closed

Fired when the dropdown menu is closed.

Keyboard Navigation

• Enter / Space - Select the focused item (or open sub menu)
• Arrow Down - Move focus to the next item
• Arrow Up - Move focus to the previous item
• Arrow Right - Open focused sub menu
• Arrow Left - Close current sub menu
• Escape - Close the dropdown (or sub menu)

CSS Custom Properties

--radius

Controls the border radius of the dropdown menu. Defaults to the global --radius value.