# How to add buttons or text elements to the topbar of dashboard 1?

**URL:** <https://discourse.nodered.org/t/how-to-add-buttons-or-text-elements-to-the-topbar-of-dashboard-1/99702>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [18 November 2025 06:51 UTC](https://discourse.nodered.org/t/how-to-add-buttons-or-text-elements-to-the-topbar-of-dashboard-1/99702 "2025-11-18T06:51:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![SXlaowang](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sxlaowang/32/103836_2.png) [@SXlaowang](https://discourse.nodered.org/u/SXlaowang)\
**Post date:** [18 November 2025 06:51 UTC](https://discourse.nodered.org/t/how-to-add-buttons-or-text-elements-to-the-topbar-of-dashboard-1/99702/1 "2025-11-18T06:51:45Z")

</div>

I found the following example in the official documentation of Dashboard 2, which can be applied to Dashboard 2 but not to Dashboard 1.

```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>

```

 ![appbar-title-teleport-actions.BgMa4tQw](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/4/34e217af859a2f4902617951b46f46665a01783e.png)  
I would like to ask how to modify the above code to make it effective in Dashboard 1?

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [19 November 2025 01:04 UTC](https://discourse.nodered.org/t/how-to-add-buttons-or-text-elements-to-the-topbar-of-dashboard-1/99702/2 "2025-11-19T01:04:23Z")

</div>

You cannot really modify the code as Dashboard 2 uses VUE and Dashboard 1 uses Angular.

However you can use the forum search option with some text like -  
**"How to add buttons or text elements to the topbar of dashboard"**  
and find many posts on the subject.

---

<div class="post-metadata">

**Author:** ![SXlaowang](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sxlaowang/32/103836_2.png) [@SXlaowang](https://discourse.nodered.org/u/SXlaowang)\
**Post date:** [19 November 2025 01:36 UTC](https://discourse.nodered.org/t/how-to-add-buttons-or-text-elements-to-the-topbar-of-dashboard-1/99702/4 "2025-11-19T01:36:59Z")

</div>

I see, finally I understand why there is such a big difference between the two.  
Thank you for your reminder.

---

<div class="post-metadata">

**Author:** ![SXlaowang](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sxlaowang/32/103836_2.png) [@SXlaowang](https://discourse.nodered.org/u/SXlaowang)\
**Post date:** [19 November 2025 13:33 UTC](https://discourse.nodered.org/t/how-to-add-buttons-or-text-elements-to-the-topbar-of-dashboard-1/99702/5 "2025-11-19T13:33:25Z")

</div>

I found [this](https://discourse.nodered.org/t/buttons-clock-logo-in-toolbar-header-dashboard-1/98583), and it happens to be able to solve the problem.

---

<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:** [3 December 2025 13:33 UTC](https://discourse.nodered.org/t/how-to-add-buttons-or-text-elements-to-the-topbar-of-dashboard-1/99702/6 "2025-12-03T13:33:57Z")

</div>

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