Hello Community,
i’m looking for a theme where the tabs for the dashboards are stacked. In default they are scrollable (left to right) but i’d rather have them stacked on top of each other.
Right now it looks something like this
I would like something like that
If not a theme a hint at how to include it into a theme would be very kind.
Also this might not be possible, in that case feel free to tell me I’m daydreaming 
Thank you
this could probably be done(hacky but possible) by putting a card-stack with buttons/links on top of each dashboard-view, effectively replacing the builtin headder and using something like browser-mod from hacs to hide the top bar… im assuming this is for a portrait-mode wall(or otherwise)mounted device
ill give it a try and see what I can come up with…(see comments by me if there are any)
here is what I came up with
note that this is using 2 hacs thingys(mushroom for the little icons)(and lovelace-layout-card to get easier and more configurable layouts) but you should be able to grab the button-version and use it without those
title: Home
views:
- theme: Graphite
title: main
path: main
type: custom:vertical-layout
badges: []
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: naive(ignore the placeholder)
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/main
icon: mdi:menu
entity: person.dummyuser
icon_color: blue
content: nav
- type: template
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/zero
icon: mdi:numeric-0-box
entity: person.dummyuser
icon_color: red
content: zero
- type: template
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/one
icon: mdi:numeric-1-box
entity: person.dummyuser
icon_color: green
content: one
- type: template
entity: person.dummyuser
icon: mdi:arrow-left-bold-box
content: two
icon_color: blue
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/two
hold_action:
action: none
- type: entity
entity: person.erik_lundstedt
- type: light
entity: light.mainlamp
alignment: center
- theme: Backend-selected
title: zero
path: zero
type: custom:vertical-layout
badges: []
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: less work but easier to set up, no text
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: back
- type: action
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/zero
hold_action:
action: none
icon: mdi:numeric-0-circle
- type: action
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/one
hold_action:
action: none
icon: mdi:numeric-1-circle
- type: action
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/two
hold_action:
action: none
icon: mdi:numeric-2-circle
alignment: center
- theme: Backend-selected
title: one
path: one
badges: []
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/main
hold_action:
action: none
show_state: false
icon_height: 50px
icon: mdi:home-circle
name: home
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/zero
hold_action:
action: none
show_state: false
icon_height: 50px
icon: mdi:circle-outline
name: zero
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/one
hold_action:
action: none
show_state: false
icon_height: 50px
icon: mdi:circle-half-full
name: one
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/two
hold_action:
action: none
show_state: false
icon_height: 50px
icon: mdi:circle
name: two
- theme: Backend-selected
title: two
path: two
badges: []
cards: []
I noticed that I forgot screenshot(s)
and here is the code for the stock one
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/main
hold_action:
action: none
show_state: false
icon_height: 50px
icon: mdi:home-circle
name: home
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/zero
hold_action:
action: none
show_state: false
icon_height: 50px
icon: mdi:circle-outline
name: zero
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/one
hold_action:
action: none
show_state: false
icon_height: 50px
icon: mdi:circle-half-full
name: one
- show_name: true
show_icon: true
type: button
tap_action:
action: navigate
navigation_path: /dashboard-tabstacks/two
hold_action:
action: none
show_state: false
icon_height: 50px
icon: mdi:circle
name: two