# Icons only in side bar

**URL:** https://discourse.nodered.org/t/icons-only-in-side-bar/6628
**Category:** Dashboard
**Created:** [9 January 2019 22:07 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628 "2019-01-09T22:07:43Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![pepedros](https://avatars.discourse-cdn.com/v4/letter/p/e495f1/32.png) [@pepedros](https://discourse.nodered.org/u/pepedros)
#### Post date: [9 January 2019 22:07 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/1 "2019-01-09T22:07:44Z")

</div>

Hi.

It is possible to hide tab names in side bar, and show only tab icon with narrow side bar?

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [9 January 2019 22:55 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/2 "2019-01-09T22:55:38Z")

</div>

no - not at present. Happy to consider a PR to do so. But would need some discussion as I've not even thought about how it could be managed/controlled/implemented.

---

<div class="post-metadata">

### Author: ![pepedros](https://avatars.discourse-cdn.com/v4/letter/p/e495f1/32.png) [@pepedros](https://discourse.nodered.org/u/pepedros)
#### Post date: [9 January 2019 23:12 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/3 "2019-01-09T23:12:14Z")

</div>

I think it may be done in two way:

1. checkbox below field tab name called "hide name in side bar" and after checked only icon from this tab will show up
2. easier way I think, in site options where are all dropdowns like "always show side menu" just add another dropdown menu with options like "show tab icons only" and "show icons and tab names"

Next, when menu is generated, just skip printing names and made menu thiner.

This is useful mod when running dashboard on small screen like 7" rpi screen.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [9 January 2019 23:29 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/4 "2019-01-09T23:29:28Z")

</div>

Surely it mostly makes sense when the sidebar is always shown ? So could just be a 3rd option in that dropdown ?

---

<div class="post-metadata">

### Author: ![pepedros](https://avatars.discourse-cdn.com/v4/letter/p/e495f1/32.png) [@pepedros](https://discourse.nodered.org/u/pepedros)
#### Post date: [10 January 2019 06:42 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/5 "2019-01-10T06:42:48Z")

</div>

Yes, but i should be option to hide menu, so it should be separated option. Maybe something like this:

![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/571a4fe9c5a19e1677e799abcb012dbe2d3ce080.jpeg)

and finally make this:

 ![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/5cf7c4898c4c778525dc9e0cc67e9b519f9bae11.jpeg)

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [10 January 2019 11:34 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/6 "2019-01-10T11:34:26Z")

</div>

Yes - though if they are in autohiding mode what is the harm in showing the labels ?

---

<div class="post-metadata">

### Author: ![pepedros](https://avatars.discourse-cdn.com/v4/letter/p/e495f1/32.png) [@pepedros](https://discourse.nodered.org/u/pepedros)
#### Post date: [10 January 2019 11:55 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/7 "2019-01-10T11:55:06Z")

</div>

autohiding mode? You mean click to show menu? But when menu is always on, labels can take almost 1/4 of screen space, so it would be nice to show only icons.

 ![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/34f2b8dd310aee0fcf0d83639bc07507844fccd6.jpeg)

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [10 January 2019 13:18 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/8 "2019-01-10T13:18:29Z")

</div>

Yes - so three options...  
Click to show - (icons and names)  
Always show (icons and names)  
Always show (icons only)

---

<div class="post-metadata">

### Author: ![pepedros](https://avatars.discourse-cdn.com/v4/letter/p/e495f1/32.png) [@pepedros](https://discourse.nodered.org/u/pepedros)
#### Post date: [10 January 2019 13:29 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/9 "2019-01-10T13:29:46Z")

</div>

yes 🙂

---

<div class="post-metadata">

### Author: ![psalibe](https://avatars.discourse-cdn.com/v4/letter/p/e9c0ed/32.png) [@psalibe](https://discourse.nodered.org/u/psalibe)
#### Post date: [10 November 2020 14:36 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/10 "2020-11-10T14:36:05Z")

</div>

Hello! Was this option ever made?

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [10 November 2020 15:52 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/11 "2020-11-10T15:52:19Z")

</div>

If you can't see it in the options then sadly no.  
(Happy to consider a pull request that adds it if anyone wants to)  
or I may get a chance to have a look later.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [11 November 2020 12:22 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/12 "2020-11-11T12:22:15Z")

</div>

How to customize dashboard CSS [🖌 Customize dashboard CSS](https://discourse.nodered.org/t/customize-dashboard-css/23139)

To have only icons in side bar (and shrink the size down)

```auto
<style>
    md-list-item p {
        display:none !important;
    }
    md-sidenav > md-list > md-list-item{
        width:88px !important;
    }
    @media (max-width: 660px){
            md-sidenav, md-sidenav.md-locked-open, md-sidenav.md-closed.md-locked-open-add-active {
            min-width: unset !important;
            width: auto !important;
            max-width: unset !important;
        }
    }
    @media (min-width: 661px){
        md-sidenav, md-sidenav.md-locked-open, md-sidenav.md-closed.md-locked-open-add-active {
            min-width: unset !important;
            width: auto;
            max-width: unset !important;
        }
    }
    md-list-item._md-button-wrap > div.md-button:first-child {
       padding: 0 16px;
    }
</style>

```

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [11 November 2020 13:05 UTC](https://discourse.nodered.org/t/icons-only-in-side-bar/6628/13 "2020-11-11T13:05:47Z")

</div>

Also now an option in menu - update pushed to master. Not yet on npm - will be in next release.