# Buttons in Header?

**URL:** <https://discourse.nodered.org/t/buttons-in-header/97341>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [30 May 2025 10:54 UTC](https://discourse.nodered.org/t/buttons-in-header/97341 "2025-05-30T10:54:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [30 May 2025 10:54 UTC](https://discourse.nodered.org/t/buttons-in-header/97341/1 "2025-05-30T10:54:24Z")

</div>

How to add a few buttons at the header so that they are visible/available in all the pages for action.

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [30 May 2025 11:16 UTC](https://discourse.nodered.org/t/buttons-in-header/97341/2 "2025-05-30T11:16:32Z")

</div>

Unless I'm mistaken, each dashboard page is independent and has its own header. There is an option to define global (all-page) CSS classes, but as far as I know this is not possible for widgets, which need to be associated to a single selected page.  
One way to bypass this could be using template nodes which import common shared elements.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [30 May 2025 11:19 UTC](https://discourse.nodered.org/t/buttons-in-header/97341/3 "2025-05-30T11:19:28Z")

</div>

This can be achieved within a UI Template node using `Teleport`: [Template ui-template | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#teleports)

I'd like us to introduce the option for every widget to have a "location" field (or something similar) which can be group/slot, where the `slot` option allows you to place that widget in the header, sidebar or other useful locations

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [30 May 2025 11:46 UTC](https://discourse.nodered.org/t/buttons-in-header/97341/4 "2025-05-30T11:46:56Z")

</div>

Thanks for the direction.  
it is appearing on ALL pages as expected when i make ui-template (Widget UI Scoped).  
But for some reason, clicking the button does not give any result in the attached debug node.

EDIT: this is in hte template node. (copied from dashboard.flowfuse)

```auto
<template>
    <Teleport v-if="mounted" to="#app-bar-title">
        <v-btn>Button 1</v-btn>
        <v-btn>Button 2</v-btn>
    </Teleport>
</template>
<script>
    export default {
        data() {
            return {
                mounted: false
            }
        },
        mounted() {
            this.mounted = true
        }
    }
</script>

```

![buttoninheader](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/a/4af4d338f01ea9867600a7cce108fa1843544f4c.gif)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 May 2025 12:47 UTC](https://discourse.nodered.org/t/buttons-in-header/97341/5 "2025-05-30T12:47:34Z")

</div>

> [@smanjunath211](#):
>
> But for some reason, clicking the button does not give any result in the attached debug node.

The `v-btn`s in your template have no click handlers. They are doing exactly what you have programmed them to do (nothing).

Here is an example of what you could do...

```auto
        <v-btn @click="send({payload:'button 1'})">Button 1</v-btn>
        <v-btn @click="send({payload:'button 2'})">Button 2</v-btn>

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [30 May 2025 14:18 UTC](https://discourse.nodered.org/t/buttons-in-header/97341/6 "2025-05-30T14:18:06Z")

</div>

Thanks a lot.

With this 'button in headers', I can clear up so much real estate in my dashboard.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [13 June 2025 14:18 UTC](https://discourse.nodered.org/t/buttons-in-header/97341/7 "2025-06-13T14:18:43Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.