Here is an example using 4 tabs with the ability to configure the colors of the buttons, or you could configure them by setting the color in the button itself - I wanted the user to be able to configure them though so added this feature (Tab5).
[{"id":"dc991e02.7909c","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"6f61fbcc.7aa964","type":"ui_button","z":"dc991e02.7909c","name":"","group":"b7378d0e.f1c9c","order":2,"width":5,"height":"1","passthru":false,"label":"Tab1","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab1","x":490,"y":160,"wires":[[]]},{"id":"80d205e.f850df8","type":"ui_button","z":"dc991e02.7909c","name":"","group":"b7378d0e.f1c9c","order":4,"width":5,"height":"1","passthru":false,"label":"Tab2","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab2","x":490,"y":200,"wires":[["4fb777fc.b1b188"]]},{"id":"1aff6efc.0c0e41","type":"ui_button","z":"dc991e02.7909c","name":"","group":"b7378d0e.f1c9c","order":6,"width":5,"height":"1","passthru":false,"label":"Tab3","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab3","x":490,"y":240,"wires":[["4fb777fc.b1b188"]]},{"id":"ab48f573.ca1c58","type":"ui_button","z":"dc991e02.7909c","name":"","group":"b7378d0e.f1c9c","order":8,"width":5,"height":"1","passthru":false,"label":"Tab4","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab4","x":490,"y":280,"wires":[["4fb777fc.b1b188"]]},{"id":"4fb777fc.b1b188","type":"function","z":"dc991e02.7909c","name":"","func":"msg.payload = msg.topic;\nreturn msg;","outputs":1,"noerr":0,"x":730,"y":460,"wires":[["90ec60e8.9633b"]]},{"id":"90ec60e8.9633b","type":"ui_ui_control","z":"dc991e02.7909c","name":"","events":"all","x":860,"y":460,"wires":[[]]},{"id":"6c397767.57e678","type":"ui_button","z":"dc991e02.7909c","name":"","group":"3b2f6450.209d1c","order":2,"width":5,"height":"1","passthru":false,"label":"Tab1","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab1","x":490,"y":360,"wires":[["4fb777fc.b1b188"]]},{"id":"6637a736.5f65e8","type":"ui_button","z":"dc991e02.7909c","name":"","group":"3b2f6450.209d1c","order":4,"width":5,"height":"1","passthru":false,"label":"Tab2","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab2","x":490,"y":400,"wires":[[]]},{"id":"fb84f3e3.18c86","type":"ui_button","z":"dc991e02.7909c","name":"","group":"3b2f6450.209d1c","order":6,"width":5,"height":"1","passthru":false,"label":"Tab3","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab3","x":490,"y":440,"wires":[["4fb777fc.b1b188"]]},{"id":"bed56047.0e1f8","type":"ui_button","z":"dc991e02.7909c","name":"","group":"3b2f6450.209d1c","order":8,"width":5,"height":"1","passthru":false,"label":"Tab4","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab4","x":490,"y":480,"wires":[["4fb777fc.b1b188"]]},{"id":"ea08095e.c968e8","type":"ui_button","z":"dc991e02.7909c","name":"","group":"7352f5ff.21627c","order":2,"width":5,"height":"1","passthru":false,"label":"Tab1","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab1","x":490,"y":560,"wires":[["4fb777fc.b1b188"]]},{"id":"e927d37c.0bf89","type":"ui_button","z":"dc991e02.7909c","name":"","group":"7352f5ff.21627c","order":4,"width":5,"height":"1","passthru":false,"label":"Tab2","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab2","x":490,"y":600,"wires":[["4fb777fc.b1b188"]]},{"id":"c97a2b94.e26608","type":"ui_button","z":"dc991e02.7909c","name":"","group":"7352f5ff.21627c","order":6,"width":5,"height":"1","passthru":false,"label":"Tab3","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab3","x":490,"y":640,"wires":[[]]},{"id":"8b9b7158.0197d","type":"ui_button","z":"dc991e02.7909c","name":"","group":"7352f5ff.21627c","order":8,"width":5,"height":"1","passthru":false,"label":"Tab4","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab4","x":490,"y":680,"wires":[["4fb777fc.b1b188"]]},{"id":"6c87d85d.60bfb8","type":"ui_button","z":"dc991e02.7909c","name":"","group":"d85af320.76327","order":2,"width":5,"height":1,"passthru":false,"label":"Tab1","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab1","x":490,"y":760,"wires":[["4fb777fc.b1b188"]]},{"id":"d8ab3c7f.97228","type":"ui_button","z":"dc991e02.7909c","name":"","group":"d85af320.76327","order":4,"width":5,"height":1,"passthru":false,"label":"Tab2","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab2","x":490,"y":800,"wires":[["4fb777fc.b1b188"]]},{"id":"9eb09c55.9994","type":"ui_button","z":"dc991e02.7909c","name":"","group":"d85af320.76327","order":6,"width":5,"height":1,"passthru":false,"label":"Tab3","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab3","x":490,"y":840,"wires":[["4fb777fc.b1b188"]]},{"id":"5fd6d434.3ad78c","type":"ui_button","z":"dc991e02.7909c","name":"","group":"d85af320.76327","order":8,"width":5,"height":1,"passthru":false,"label":"Tab4","tooltip":"","color":"","bgcolor":"{{msg.colour}}","icon":"","payload":"","payloadType":"str","topic":"Tab4","x":490,"y":880,"wires":[[]]},{"id":"19be37b2.9680a8","type":"comment","z":"dc991e02.7909c","name":"Tab1","info":"","x":490,"y":120,"wires":[]},{"id":"41e0220f.cfe54c","type":"comment","z":"dc991e02.7909c","name":"Tab2","info":"","x":490,"y":320,"wires":[]},{"id":"6688207e.45abd","type":"comment","z":"dc991e02.7909c","name":"Tab3","info":"","x":490,"y":520,"wires":[]},{"id":"8c759956.ae9b78","type":"comment","z":"dc991e02.7909c","name":"Tab4","info":"","x":490,"y":720,"wires":[]},{"id":"3b170e2e.8482c2","type":"comment","z":"dc991e02.7909c","name":"Menu Buttons","info":"","x":310,"y":160,"wires":[]},{"id":"1f59ff53.f9e241","type":"inject","z":"dc991e02.7909c","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":290,"y":380,"wires":[["d99599fb.dd5fa8","fde6ac76.576c6"]]},{"id":"d99599fb.dd5fa8","type":"function","z":"dc991e02.7909c","name":"","func":"msg.colour = flow.get(\"menu_button_color\");\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":440,"wires":[["80d205e.f850df8","1aff6efc.0c0e41","ab48f573.ca1c58","6c397767.57e678","fb84f3e3.18c86","bed56047.0e1f8","ea08095e.c968e8","e927d37c.0bf89","8b9b7158.0197d","6c87d85d.60bfb8","d8ab3c7f.97228","9eb09c55.9994"]]},{"id":"fde6ac76.576c6","type":"function","z":"dc991e02.7909c","name":"","func":"msg.colour = flow.get(\"menu_button_selected_color\");\nreturn msg;","outputs":1,"noerr":0,"x":290,"y":480,"wires":[["6f61fbcc.7aa964","6637a736.5f65e8","c97a2b94.e26608","5fd6d434.3ad78c"]]},{"id":"d23ec3ec.c98a","type":"ui_button","z":"dc991e02.7909c","name":"","group":"d2867c6a.11bb8","order":3,"width":4,"height":1,"passthru":false,"label":"Refresh Button Colours","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"","x":210,"y":540,"wires":[["fde6ac76.576c6","d99599fb.dd5fa8"]]},{"id":"9be3bc68.0db6e","type":"function","z":"dc991e02.7909c","name":"","func":"msg.payload = flow.get(\"menu_button_color\") || \"blue\";\nreturn msg;","outputs":1,"noerr":0,"x":190,"y":960,"wires":[["26fcad7f.eaa762"]]},{"id":"26fcad7f.eaa762","type":"ui_text_input","z":"dc991e02.7909c","name":"","label":"Menu Button Color","tooltip":"","group":"d2867c6a.11bb8","order":1,"width":4,"height":1,"passthru":false,"mode":"color","delay":"0","topic":"","x":370,"y":960,"wires":[["ddaa62c1.8cb05"]]},{"id":"ddaa62c1.8cb05","type":"function","z":"dc991e02.7909c","name":"save_menu_button_color","func":"flow.set(\"menu_button_color\", msg.payload)","outputs":1,"noerr":0,"x":610,"y":960,"wires":[[]]},{"id":"246d09bf.530a26","type":"function","z":"dc991e02.7909c","name":"save_menu_button_selected_color","func":"flow.set(\"menu_button_selected_color\", msg.payload)","outputs":1,"noerr":0,"x":700,"y":1000,"wires":[[]]},{"id":"78a8c503.66fc5c","type":"ui_text_input","z":"dc991e02.7909c","name":"","label":"Menu Button Selected Color","tooltip":"","group":"d2867c6a.11bb8","order":2,"width":4,"height":1,"passthru":false,"mode":"color","delay":"0","topic":"","x":400,"y":1000,"wires":[["246d09bf.530a26"]]},{"id":"e7172377.be6c4","type":"function","z":"dc991e02.7909c","name":"","func":"msg.payload = flow.get(\"menu_button_selected_color\") || 0;\nreturn msg;","outputs":1,"noerr":0,"x":190,"y":1000,"wires":[["78a8c503.66fc5c"]]},{"id":"99b55f85.0bf96","type":"ui_text","z":"dc991e02.7909c","group":"b7378d0e.f1c9c","order":4,"width":0,"height":0,"name":"","label":"This is Tab 1","format":"{{msg.payload}}","layout":"row-spread","x":770,"y":180,"wires":[]},{"id":"a26f9dcf.55166","type":"ui_text","z":"dc991e02.7909c","group":"3b2f6450.209d1c","order":4,"width":0,"height":0,"name":"","label":"This is Tab 2","format":"{{msg.payload}}","layout":"row-spread","x":770,"y":240,"wires":[]},{"id":"158a2d9.1fc1fd2","type":"ui_text","z":"dc991e02.7909c","group":"7352f5ff.21627c","order":4,"width":0,"height":0,"name":"","label":"This is Tab 3","format":"{{msg.payload}}","layout":"row-spread","x":770,"y":300,"wires":[]},{"id":"68e8494d.c528a8","type":"ui_text","z":"dc991e02.7909c","group":"d85af320.76327","order":4,"width":0,"height":0,"name":"","label":"This is Tab 4","format":"{{msg.payload}}","layout":"row-spread","x":770,"y":360,"wires":[]},{"id":"b7378d0e.f1c9c","type":"ui_group","z":"","name":"Buttons","tab":"58ddda69.724c24","order":4,"disp":false,"width":30,"collapse":false},{"id":"3b2f6450.209d1c","type":"ui_group","z":"","name":"Buttons","tab":"980906e8.d43858","order":3,"disp":false,"width":30,"collapse":false},{"id":"7352f5ff.21627c","type":"ui_group","z":"","name":"Buttons","tab":"8f0a9aa0.2d4208","order":1,"disp":false,"width":30,"collapse":false},{"id":"d85af320.76327","type":"ui_group","z":"","name":"Buttons","tab":"486ce70b.339908","order":2,"disp":false,"width":30,"collapse":false},{"id":"d2867c6a.11bb8","type":"ui_group","z":"","name":"Config","tab":"cb43c930.6978e8","order":1,"disp":true,"width":"6","collapse":false},{"id":"58ddda69.724c24","type":"ui_tab","z":"","name":"Tab1","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"980906e8.d43858","type":"ui_tab","z":"","name":"Tab2","icon":"dashboard","order":2,"disabled":false,"hidden":false},{"id":"8f0a9aa0.2d4208","type":"ui_tab","z":"","name":"Tab3","icon":"dashboard","order":3,"disabled":false,"hidden":false},{"id":"486ce70b.339908","type":"ui_tab","z":"","name":"Tab4","icon":"dashboard","order":4,"disabled":false,"hidden":false},{"id":"cb43c930.6978e8","type":"ui_tab","z":"","name":"Tab5","icon":"dashboard","order":6,"disabled":false,"hidden":false}]
You will need to enable persistent storage if you want the colors to be retained after reboot.
I also use a groups to space the buttons along the top of the screen - you need to put at least one 1x1 spacer in the group and a ui-template node with the following code will make it transparent;
<style>
#Tab1_Tab1LeftSpacer {
opacity : 0;
}
</style>
Tab1 is name of the tab and Tab1LeftSpacer is the name of the group. If you want to remove the standard tab menu that can be done in Dashboard configuration. Although this setup may need to be adjusted depending on screen resolution - it's working pretty well for me.
