Skip to content

Dropdowns

Our action dropdowns for pages, files and users are all loaded on request. This way, we can load and evaluate permissions individually from the API and then disable items in the dropdowns that should not be accessible.

So far, quite a lot of frontend code is needed to get this right. With the Fiber concept, we can handle those dropdowns easily on the backend and then just replace our frontend code with a simple single call.

<k-dropdown>
    <k-button @click="$refs.options.toggle()">Options</k-button>
    <k-dropdown-content :options="$dropdown('pages/projects+project-a')">
</k-dropdown>

The backend code for this is very straightforward as well and is defined as part of our areas

Site area
return [
    'label' => 'Site',
    ...
    'dialogs' => ...
    'views' => ...
    'dropdowns' => [
        'pages/(:any)' => function (string $id) {
            $page = Find::page($id);

            return [
                [
                    'text' => 'Open',
                    'icon' => 'preview',
                    'link' => $page->previewUrl(),
                ],
                ...
                [
                    'text'   => 'Delete',
                    'icon'   => 'trash',
                    'dialog' => 'pages/' . $id . '/delete'
                ]
            ];
        }
    ]
];

Option settings

Each option in your dropdown can define a set of parameters to control how the option is displayed and what happens on click.

Parameter Type Description
click string The name of the event that will be triggered on click
dialog string|array Either a single path to a dialog or dialog settings
disabled bool Enable/disable the item
icon string The name of the option icon
link string An optional url/path to create a link instead of a button
target string A link target (i.e. _blank)
text string The label for the option

In your plugin

Of course, you can create your own dropdowns for your plugins

Kirby::plugin('your-plugin/todos', [
    'areas' => [
        'todos' => function ($kirby) {
            return [
                ...
                'dropdowns' => [
                    'todos/(:any)' => function (string $id) {
                        // find the $todo here. (i.e. from a database)
                        return [
                            [
                                'text'   => 'Edit',
                                'dialog' => 'todos/' . $id . '/edit',
                                'icon'   => 'edit'
                            ],
                            [
                                'text'   => 'Duplicate',
                                'dialog' => 'todos/' . $id . '/duplicate',
                                'icon'   => 'copy'
                            ],
                            [
                                'text'   => 'Delete',
                                'dialog' => 'todos/' . $id . '/delete',
                                'icon'   => 'trash'
                            ]
                        ];
                    }
                ]
            ];
        }
    ]
]);

Your dropdown options can then be loaded in your Vue code like this:

<k-dropdown>
    <k-button icon="cog" @click="$refs.options.toggle()">Options</k-button>
    <k-dropdown-content ref="options" :options="$dropdown('todos/the-todo-id')" />
</k-dropdown>

Extending dropdowns

It will soon be possible to extend our default dropdowns for pages, users and files with your own custom options.