Add element to topbar in the Panel

I want to add an icon/link to the topbar in the Panel, right next to the search-icon.

How can this be done? I tried to add html with simple JS but nothing appears…



I don’t think it’s feasible but if you want to give it a try:

Since the Panel in K3 is build with Vue.js, you will need to create a plugin that extend the panel.

And here’s the file you are searching for: Topbar.vue.

I start with trying to extend/override some default Panel Views but I don’t get the structure.

Tried this:

panel.plugin("my/view-plugin", {
    components: {
        "k-users-view": {
            template: "<template>Test</template>"

But nothing happens to the users view. I’m sure I haven’t got it right at all, please put me in the right direction… Thanks.

Nobody who knows how to override a Panel View?

Don’t know that much about Vue in Kirby but you shouldn’t use <template> tags in the template property. You only use <template> tags in single file components (outside the <script> tags).

Yes, I’ve tried without it also but it doesn’t change the result, nothing happens in the view

I asked around and it doesn’t seem to be impossible but rather complicated to achieve.

What is your use case?

In my case I have removed (hidden) the main navigation in the topbar and added my own sidebar navigation with the pages I need (it’s a div element I include in the panel.php view). That works well. But now I want to have add the current user and a logout button to the topbar, next to the search icon.

Hope you understand!


Hello. Anybody?