Hi, I am creating a custom navigation menu in lovelace that switches between the views (just a bunch of buttons with navigation paths).
Question: is there a way to make my navigation menu available to all views in that dashboard without having to copy it over to every view?
Thanks in advance!
did you figure it out?
No, unfortunately.
decluttering_templates:
footer_sticky_menu:
card:
type: entities
entities:
- type: custom:paper-buttons-row
buttons:
- entity: input_boolean.mode_silencieux
layout: icon
name: Silence
style:
button:
width: 42px
height: 42px
icon:
background: var(--background-color)
padding: 10px 26px
border-radius: 26px
margin-top: 0
name:
margin-top: 20px
- layout: icon
icon: mdi:window-shutter
name: Volets
tap_action:
action: navigate
navigation_path: /lovelace/volets
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
- layout: icon
icon: mdi:cart-outline
name: Liste
tap_action:
action: navigate
navigation_path: /lovelace/liste
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
- icon: mdi:video
layout: icon
name: Sécurité
tap_action:
action: navigate
navigation_path: /lovelace/securite
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
- layout: icon
icon: mdi:cog
name: RĂ©glages
tap_action:
action: navigate
navigation_path: /lovelace/reglages
style:
button:
width: 42px
height: 42px
icon:
margin-top: 0
name:
margin-top: 20px
style: |
div.flex-box {
display: flex;
justify-content: space-between;
align-items: center;
margin: -14px !important;
}
style: |
ha-card {
margin-bottom: 0px !important;
padding: 0 16px;
border-radius: 5px !important;
margin-left: 20px;
margin-right: 20px;
}
views:
- title: Home
theme: Rounded
type: panel
badges: []
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:decluttering-card
template: footer_sticky_menu
style: |
:host {
position: absolute !important;
bottom: 0px;
margin-bottom: 0px !important;
animation: 1.2s position ease-in-out;
width: 100%;
}
@keyframes position {
0% { bottom: -80px; }
20% { bottom: -80px; }
70% { bottom: 26px; }
90% { bottom: 24px; }
100% { bottom: 26px; }
}
ha-card {
background: none;
border-radius: 5px !important;
}
:host:before {
content: '';
display: block;
position: absolute;
bottom: -26px;
left: -8px;
padding-right: 16px;
height: 80px;
width: 100%;
background: linear-gradient(180deg, rgba(45, 56, 76, 0) 0%, rgba(35, 46, 66, 0.85) 50%);
pointer-events: none;
animation: 1.2s opacity ease-in-out;
}
@keyframes opacity {
0% { opacity: 0; }
20% { opacity: 0; }
100% { opacity: 1; }
}
### The sticky position don't work with Decluttering card
### This is why I have to add the CSS here
### If you don't use the UI you can use YAML anchors instead
Maybe this can help?