Starting point for customising dropdown menu in panel

Hi! Is there a possibility to easily add a link to the dropdown menu for a file entry?
Unfortunately I do not know Vue but maybe adding a button is quite easy without Vue?

My goal is to append the link to the file details also to the dropdown menu. The file blueprint contains text fields for adding meta info to the file. Clients can’t find where to add this meta info because it’s not clear from the beginning that clients have to click directly onto the file image/icon to add this meta info.

Besides the cursor being a pointer, there’s no visual indication, that it needs this specific click to add the meta info fields. Naturally, on touch devices there’s no pointer cursor and therefore no indication at all.

Although I’m explaining the panel or even adding an info field, this additional and hidden click does not seem UI-natural.

So, to make the panel even more user-friendly (don’t get me wrong, it’s already very user-friendly), I’m trying to achieve the following:

Thanks for any tips!

Or a starting point!

1 Like

I have encountered the same inconsistency in training users myself.

While the first option in the Panel dropdown commonly doubles the action of clicking onto the list item itself (e.g. in a pages section, clicking the list item opens the page view as does the first “Open” option in the dropdown), the files section works differently - and “Open” here refers to “View the file” rather than “Open the according panel page”.

Hacking your suggested “Meta info” element into the dropdown is probably only possible by building a custom files section (i.e. cloning the entire section as a customized plugin) - and you still end up with “Open” meaning something else than in other sections. Would this be a candidate for opening an issue in the Kirby Github repo instead?

In my thinking, this should be the order:

  1. “Open” > leads to the file’s panel page (what you call “Meta info”)
  2. probably a spacer line, to remain consistent with other sections
  3. “View” > opens the file (the functionality currently labeled as “Open”)
  4. “Rename”
  5. “Replace”
  6. another spacer line, to remain consistent with other sections
  7. “Delete”
1 Like

Hi Sebastian!

Thanks for your in-depth reply. Yeah, I thought that it would need a plugin for that. :confused: (Thanks for the links!) I think I’ll refrain from creating a plugin since I’m not that firm with the plugin structure.

I’m hiding the “Open” button via a custom CSS-file to avoid the inconsistency you mentioned since certain clients don’t use it to view an image file by itself.

For now, I added a pencil icon via CSS/icon-font as a click-indicator. It’s inside the <a wrapper, so it clicks.

.k-icon-edit::before  {
  font-size: 1.7rem;
  float: right;
  cursor: pointer;
  height: 1.25rem;
  display: inline-flex;
  align-items: center;
  margin-right: 25px;

.k-icon-edit svg {
  display: none;

To make the pencil symbol consistent throughout the whole panel I’m hiding the panel’s native pencil icon.

I went ahead and filed an issue:

…either this is indeed an accidental inconsitency, or there is some reason that we cannot know about – this way we’ll find out :slight_smile:

1 Like

Nice, thank you very much, that’s very helpful! Have a nice day!