# Add content to the left hand side of the top bar

**URL:** <https://discourse.nodered.org/t/add-content-to-the-left-hand-side-of-the-top-bar/87345>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [19 April 2024 14:16 UTC](https://discourse.nodered.org/t/add-content-to-the-left-hand-side-of-the-top-bar/87345 "2024-04-19T14:16:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nileio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nileio/32/9444_2.png) [@nileio](https://discourse.nodered.org/u/nileio)\
**Post date:** [19 April 2024 14:16 UTC](https://discourse.nodered.org/t/add-content-to-the-left-hand-side-of-the-top-bar/87345/1 "2024-04-19T14:16:01Z")

</div>

hi @joepavitt thanks for continuously adding improvements to dashboard 2.0 .. i finally got a chance to closely have a look! this has a solid design for future expansion which is great !!  
In regards to `Teleport` , is there a way to add content to the left hand side of the top bar instead of only to the right hand side? use case is an application logo ? is this planned ? , that is similar to "#app-bar-actions" ..  
it would be really nice to have control over the page title, custom application logo and favicon of app or perhaps an option to hide the topbar altogether .. i have a use case where I control navigation from the page as a single page dashboard

thank you!!

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [19 April 2024 14:52 UTC](https://discourse.nodered.org/t/add-content-to-the-left-hand-side-of-the-top-bar/87345/2 "2024-04-19T14:52:16Z")

</div>

@nileio I've moved this post to it's own specific topic.

---

<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:** [19 April 2024 15:20 UTC](https://discourse.nodered.org/t/add-content-to-the-left-hand-side-of-the-top-bar/87345/3 "2024-04-19T15:20:57Z")

</div>

Happy to include - do you mean in place of the page title we currently have, but keeping the hamburger menu to open the sidebar?

Can you open a "Feature Request" here please: [Issues · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/issues)

---

<div class="post-metadata">

**Author:** ![nileio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nileio/32/9444_2.png) [@nileio](https://discourse.nodered.org/u/nileio)\
**Post date:** [20 April 2024 08:26 UTC](https://discourse.nodered.org/t/add-content-to-the-left-hand-side-of-the-top-bar/87345/4 "2024-04-20T08:26:18Z")

</div>

> [@joepavitt](#):
>
> Happy to include - do you mean in place of the page title we currently have, but keeping the hamburger menu to open the sidebar?

Yes.. it would follow the same way as the `#app-bar-actions` , lets say we call it `#app-bar-title` and let the user control the content of that if desired. If `Teleport` is used then it simply takes precedence and is used instead of the default page title. Of course this would follow suit with the `Scope` being either Page or UI. This would mean that the user can include whichever they please as content which is typically would be a logo and app title.. however , this would hopefully mean we can use a variable for page title. Is there out of box constants which can be used in the template such as `PAGETITLE`, `APPNAME`,etc. ? sorry I may have not went that far into the docs..

---

<div class="post-metadata">

**Author:** ![nileio](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nileio/32/9444_2.png) [@nileio](https://discourse.nodered.org/u/nileio)\
**Post date:** [20 April 2024 08:30 UTC](https://discourse.nodered.org/t/add-content-to-the-left-hand-side-of-the-top-bar/87345/5 "2024-04-20T08:30:26Z")

</div>

> [@joepavitt](#):
>
> keeping the hamburger menu to open the sidebar?

In regards to the hamburger menu - I think it is a separate issue and would require some thoughts on how to allow user to control because it is related to navigation as a whole.. Ideally we can enable/disable the hamburger menu (which I believe automatically happens depending on the `style` option selected of the Sidebar but just choose a different icon if desired would be great.. thinking about navigation as a whole and looking at `vuetify` there are different options for navigation system which might be useful but I feel this is not a priority and might need a separate management from Node-RED altogether. I imagine having few options related to navigation actually such as changing the orientation of the navigation to make it top-bar instead of sidebar, or changing the location of the navigation to the right hand side of the screen ... which are all possible options with `vuetify` but I guess it is better that we think about navigation and hamburger menu options holistically on its own.. does that make sense ? happy to open feature requests - please let me know how you like me to proceed..

---

<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:** [20 May 2024 09:20 UTC](https://discourse.nodered.org/t/add-content-to-the-left-hand-side-of-the-top-bar/87345/7 "2024-05-20T09:20:51Z")

</div>

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