Skip to content

Kirby 3.6.6



This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

Dropdowns are constructed with two elements: <k-dropdown> is used as wrapper to position the dropdown relatively to the button (or any other element) that serves as toggle. <k-dropdown-content> holds any content shown when opening the dropdown: any number of <k-dropdown-item> elements or any other HTML.


Slot Description


  <k-button @click="$refs.dropdown.toggle()">Menu</k-button>
  <k-dropdown-content ref="dropdown">
    <k-dropdown-item>Option A</k-dropdown-item>
    <k-dropdown-item>Option B</k-dropdown-item>
    <k-dropdown-item>Option C</k-dropdown-item>


as array

Instead of adding k-dropdown-item elements manually, you can also inject them with an array

  <k-button @click="$refs.dropdown.toggle()">Menu</k-button>
      {icon: 'edit', text: 'Option A', click: clickHandler},
      {icon: 'cog', text: 'Option B', click: clickHandler},
      {icon: 'trash', text: 'Option C', click: clickHandler}

from dropdown extension

Using a Panel dropdown extension, you can simply reference it like this:

<k-dropdown-content options="my/custom/dropdown" />`

from an async function (e.g. API call)

The item array can also be returned in an options handler to dynamically load options

    <k-button @click="$refs.dropdown.toggle()">Menu</k-button>
    <k-dropdown-content ref="dropdown" :options="fetchOptions" />

export default {
  methods: {
    fetchOptions() {
      return (ready) => {
        this.$api.get("/some/options").then(options => {

from an JSON API endpoint

Dropdown items can also be fetched from a JSON endpoint:

  <k-button @click="$refs.dropdown.toggle()">Menu</k-button>
  <k-dropdown-content ref="dropdown" options="/api/options.json" />

This will fetch the options only as soon as the dropdown will be opened.

CSS classes