Extending the Panel topbar

Is there any way I can extend the functions of the panel?

See this screenshot;

I want to add a new menu (upper right corner) that shows all available pages for this site.

When clicking on a page, I jump directly to that page (in the panel, not the front-end) so I can modify it.

Of course I can do this;

  1. click on the dashboard link
  2. wait
  3. click on a page to edit
  4. wait
  5. edit the page
  6. back to step 1 for another page to edit

…but I want to be able to quickly jump from page to page, while editing - without the forced route to the dashboard hub every single time.

Creating the extra menu is no problem, but how can I get it “in” the panel?

  1. It’s not a widget (they only show up on the dashboard, not the subpages).
  2. I can create it as a field, but I don’t want to add that field to all blueprints in order to view it.
  3. It’s not a tag.
  4. I tried to hook a panel-function, but without any result.
  5. I guess it’s a plug-in or so?

So I created it a folder jumplist inside the plugin directory and placed a php-file in it; jumplist.php



  /* get kirby functions */

  $kirby = kirby();
  $site  = $kirby->site();

?>'<nav id="jumplist" style="background:#000;padding:1em;display:inline-block;position:absolute;z-index:666;right:70px;top:-5px;"><ul class="menu"><?php foreach($site->pages()->visible() as $p): ?><li style="list-style:none;"><a style="color:#fff;" href="<?php echo $site->url()."/panel/pages/".substr($p->url(),strrpos($p->url(),"/")+1); ?>/edit"><?php echo $p->title()->html(); ?></a></li><?php endforeach ?></ul></nav>'<?php endif; ?>

But all the codes in this file are loaded automatically in the main-js file, which causes the system to break (since it’s no js at all).

I managed to get it working by placing all codes on one line, wrapped in a ' tag.

With inline styling I was able to move the menu to the upper right corner, but I still see the two ' tags below the hamburger-icon in the left corner.

I know this is not the way to solve it… so is there any way to do it?

I can extend the panel with styling, setting an extra css-asset in the site config, but this doesn’t work for functionality like this…

In the upcoming 2.3 version, you can use the search to find a page and then jump to that page.

1 Like

:stuck_out_tongue: So I am slow with ideas, as allways :slight_smile:

The new option sounds great… but is there any option to add functions to the panel in a proper way (not for this particular solution, but maybe for other functions?).

My solution now is rubbish… it works, but… with bad coding practice :slight_smile:

Well, since no-one can answer me, I decided to solve it all by my self (don’t worry - I’m getting used to it :stuck_out_tongue: )

I’ve extended the panel with a nice little snippet that shows up next to the search-icon.

When you “hover” it, all the pages of your site become visible and you can jump directly to one of them and start editing;

No more forced route via the dashboard-hub or entering the pages manually in the search-box;

Just hover, click… edit!


When interested, will post on Git.

What happends with your menu when you click save or have multi languages on? Overlaping?

Hm, the list might get pretty long if there are lots of pages?

Then the extra icon will move to another space in the DOM;

It’s not positioned absolute, but placed there by Javascript (it checks the DOM in the header and “appends” the extra item before the first one".

And the “save message” is still visible, sliding over the extra menu-item.

1 Like

That’s correct; but I build in a limit;

When showing more than 10 pages, there will be a scrollbar visible “inside” the extra menu.

That way is not too long when having many pages.

It’s not a perfect solution, but it works for me… and it works fast when editing a lot in the back-end (copy/paste between pages is really easy now).

- edit - Don’t really like the scrollbar; will build in a breakpoint at 10, so sites with more than 10 pages will get an extra row in the pulldown.

Children are not visible, until you “hover” over the parent.

Lol - just finetuned my jumplist plugin;

You can jump from page to page / page to sub-page within one click;

It allows editing / copy - paste through pages really fast.

Single click page navigation; it missed it :stuck_out_tongue:

You can set the maximum length of one page-row in the sites config.php and this little snippet will do the rest :stuck_out_tongue:

1 Like

- edit - By the way, my initial question is still not solved :cry:

…how can I extend the functionality of the panel?

Not by a widget or plugin, or at least I didn’t figure out how.

My “solution” now is dirty; it’s a field which is included in every blueprint and moved to the header by javascript… that’s bad practice in my opinion.

So if anyone know how to integrate such a menu-item the correct way; please let me know! :slight_smile:

I’ll place the code on Git, when I have the solution :stuck_out_tongue:

There is currently no official way to add items to the topbar, so you can’t. But it might come in a future version.

1 Like

Cool - problem solved :slight_smile:

Will update code to Git and publish URI here.