# Dashboard top bar Logo clickable?

**URL:** <https://discourse.nodered.org/t/dashboard-top-bar-logo-clickable/50627>\
**Category:** Dashboard\
**Created:** [5 September 2021 08:16 UTC](https://discourse.nodered.org/t/dashboard-top-bar-logo-clickable/50627 "2021-09-05T08:16:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jean-Luc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-luc/32/89996_2.png) [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)\
**Post date:** [5 September 2021 08:16 UTC](https://discourse.nodered.org/t/dashboard-top-bar-logo-clickable/50627/1 "2021-09-05T08:16:53Z")

</div>

Hello to all,  
Like many I use the template that allows to have a logo + the current time in the header bar of the dashboard.  
Do you think it is possible to make the logo clickable?  
As in many websites, when we click on it, it brings us back to the main page. It would be a plus and it would avoid me to add a "home" button on each page or even in the header if I can.

 ![Capture d'écran Deepin_zone de sélection _20210905101202](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/38918dad3859cedfbe4024057df0f12cc5dbb093.png)

Thank you in advance for your ideas or solutions. Have a nice Sunday 🔆

---

<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:** [5 September 2021 11:14 UTC](https://discourse.nodered.org/t/dashboard-top-bar-logo-clickable/50627/2 "2021-09-05T11:14:55Z")

</div>

If your ui-template is a head template, you have limited options. You could wrap the icon in an anchor `<a>` and set the `href` to your home page. This will cause a full reload.

If your ui-template is a content item, then you can use `scope.send` to send a message back to node-red that then triggers a ui-control node to change to home page.

Read the built in help for ui-template and ui-control nodes for how to do this.

---

<div class="post-metadata">

**Author:** ![Jean-Luc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-luc/32/89996_2.png) [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)\
**Post date:** [5 September 2021 11:42 UTC](https://discourse.nodered.org/t/dashboard-top-bar-logo-clickable/50627/3 "2021-09-05T11:42:56Z")

</div>

Hey Steve,  
thank you for the 2 tracks to follow.  
I am in the 1st case "head template". I totally understand the idea of adding an HTML  
`<a>` element with its href attribute.  
Something like this `<a href="https://example.com">Website</a>` . it suits me perfectly.  
However my scripting skills suck. Could you please tell me how to add these attributes to this script?  
I did read and re-read the help but I am not skilled enough to implement this in the script.

The 2nd track, I find it less relevant in my case. On the other hand very interesting in other situations.  
I tried it with this [subject](https://discourse.nodered.org/t/button-in-title-bar/33229) and this [one](https://discourse.nodered.org/t/button-in-topbar/6377)  
I attach the actual script below

```auto
<script id="clockScript1" type="text/javascript">
    var clockInterval;
    $(function () {
        if (clockInterval) return;

        //add logo
        var div1 = $('<div/>');
        var logo = new Image();

        logo.src = '/logo-onduleur.png'
        logo.height = 50;
        div1[0].style.margin = '10px auto';

        div1.append(logo);

        //add clock
        var div2 = $('<div/>');
        var p = $('<p/>');

        div2.append(p);
        div2[0].style.margin = '5px';

        function displayTime() {
            p.text(new Date().toLocaleString());
        }
        
        clockInterval = setInterval(displayTime, 1000);

        //add to toolbar when it's available
        var addToToolbarTimer;
        
        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');
            
            if(!toolbar.length) return;
            
            toolbar.append(div1);
            toolbar.append(div2);
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 100);
    });
</script>

```

---

<div class="post-metadata">

**Author:** ![Jean-Luc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-luc/32/89996_2.png) [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)\
**Post date:** [5 September 2021 12:02 UTC](https://discourse.nodered.org/t/dashboard-top-bar-logo-clickable/50627/4 "2021-09-05T12:02:56Z")

</div>

This script below that comes from this [conversation](https://discourse.nodered.org/t/access-msg-object-in-dashboard-ui-template/5502/9) allows me to send a payload when the "Home" button is clicked.  
But I have to insert it in each flow, which is less practical but possible indeed  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/37f5919804e594f9a3a44e6b82bb8de3ccf73897.png)

```auto
<!DOCTYPE html>
<html>
<script>
    var theScope = scope;
    var abc = 'maison';
    
    var nodes = document.createElement('BUTTON');
    nodes.addEventListener('click', sendPayload);
    nodes.innerHTML = 'Home';
    var titleBar = document.getElementById("nr-dashboard-toolbar");
    titleBar.appendChild(nodes);
    
    function sendPayload(){
        theScope.send({payload:abc});
    }
</script>
</html>

```

---

<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:** [5 September 2021 12:06 UTC](https://discourse.nodered.org/t/dashboard-top-bar-logo-clickable/50627/5 "2021-09-05T12:06:42Z")

</div>

See commented parts below.

```auto

<script id="clockScript1" type="text/javascript">
  var clockInterval;
    $(function () {
        if (clockInterval) return;

        //add logo
        var div1 = $('<div/>');
        var logo = new Image();

        logo.src = 'https://cdn.pixabay.com/photo/2015/11/06/13/29/union-jack-1027898_960_720.jpg'
        logo.height = 50;
        div1[0].style.margin = '10px auto';

        var a = $("<a/>"); //create an anchor / hyperlink
        a.attr("href", "/ui"); //set HREF to dashboard homepage
        a.append(logo); //add logo to anchor
        div1.append(a); //add anchor to div1

        //add clock
        var div2 = $('<div/>');
        var p = $('<p/>');

        div2.append(p);
        div2[0].style.margin = '5px';

        function displayTime() {
            p.text(new Date().toLocaleString());
        }
        
        clockInterval = setInterval(displayTime, 1000);

        //add to toolbar when it's available
        var addToToolbarTimer;
        
        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');
            
            if(!toolbar.length) return;
            
            toolbar.append(div1);
            toolbar.append(div2);
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 100);
    });
</script>

```

---

<div class="post-metadata">

**Author:** ![Jean-Luc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-luc/32/89996_2.png) [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)\
**Post date:** [5 September 2021 12:12 UTC](https://discourse.nodered.org/t/dashboard-top-bar-logo-clickable/50627/6 "2021-09-05T12:12:57Z")

</div>

**Whowwhh,**  **it's works like that** 🤩

This is a big step for the usability of my site's navigation.  
Many thanks Steve.

---

<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:** [19 September 2021 12:13 UTC](https://discourse.nodered.org/t/dashboard-top-bar-logo-clickable/50627/7 "2021-09-19T12:13:11Z")

</div>

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