Aprende a agregar una barra de navegación en HA, para conseguir un panel de control propio de la aplicación más elegante!
¿Qué es una barra de navegación y qué nos aporta?
Si ya has jugado un poco con el panel de control (o «Lovelace») de Home Assistant, ya te habrás dado cuenta que dentro de un mismo panel puedes incluir distintas «vistas». Esto es muy práctico para no sobrecargar paneles o dividir la información por concepto («Iluminación», «Seguridad», «Consumo»…), por estancias, por usuario…
Cuando creamos varias vistas dentro de un mismo panel, por defecto se agrega el icono o nombre correspondiente en la barra superior de la interfaz. Esta nos permite movernos entre vistas de una forma sencilla.
También puedes moverte asignando la «función de navegación» a cualquier elemento (por ejemplo, un botón o un icono). Para ello sólo tienes que asignarle el siguiente ‘tap_action’ con la ruta a la vista correspondiente.
tap_action: action: navigate navigation_path: /lovelace/aguacatec
No obstante, si eres de los que disfrutan personalizando al máximo tu panel de control, también puedes agregar una barra de navegación en HA totalmente personalizada. La función es exactamente la misma, pero anulando la barra superior para conseguir un aspecto más estetico y uniforme con el resto de tu panel.
Además, podrás asignar otras funciones a los iconos de la barra, como la apertura de un pop-up con información ampliada.
Navbar Card
La forma más sencilla de agregar una barra de navegación en HA es utilizando Navbar Card de esta forma:
- Desde Home Assistant, entra en HACS y busca «Navbar Card».
- Haz clic en «Descargar» y recarga la caché del navegador.
- Vuelve a tu panel de control y agrega una nueva tarjeta del tipo «Navbar Card».
- Por defecto, viene un ejemplo preconfigurado, por lo que es muy fácil de editar desde la interfaz. Por ejemplo, puedes configurar hacia dónde «apunta» cada icono desde el apartado «routes», o personalizar la posición de la barra en el apartado «Desktop options» (abajo, a la izquierda…). Puedes consultar todas las opciones disponibles en la documentación de la tarjeta.
- Una vez que hayas terminado de configurar tu barra de navegación, ya puedes ocultar el menú superior. Para ello vuelve a HACS, busca Kiosk Mode, descárgalo y reinicia Home Assistant.
- Cuando termine, accede desde el menú lateral al panel correspondiente y pulsa sobre el icono del lápiz de la esquina superior derecha. Ahora pulsa sobre el icono de los 3 puntos que ha aparecido en su lugar, y selecciona la opción «Editor de configuración en bruto». Esto te mostrará el código yaml del panel, para que añadas las siguientes líneas al principio del código.
kiosk_mode: hide_header: true
- Haz clic en «Guardar» y pulsa sobre la «x» a la derecha del panel para cerrar el modo edición. Observa que el menú superior ha desaparecido del panel, dándole el protagonismo a tu barra de navegación. No obstante, no sufrás, puedes recuperar el acceso al modo edición añadiendo ‘?disable_km’ al final de la URL. Por ejemplo:
Barra de navegación personalizada
Navbar card es muy sencilla de utilizar, pero si quieres ir un paso más allá, también puedes agregar una barra de navegación en HA 100% personalizada.
Para reproducir este ejemplo necesitas instalar desde HACS las tarjetas de Card Mod, Button Card y, si quieres usar pop-ups, Bubble Card. Una vez instaladas, utiliza el siguiente código para obtener un resultado similar al de la imagen, dependiendo de tu tema (el del ejemplo es «Frosted Glass Theme«).
type: custom:mod-card
card_mod:
style: |
@media (min-width:180px) {
ha-card {
z-index:6;
position: fixed;
background: var(--gray800);
bottom: 10px;
left: 10px;
padding: 10px;
border-radius: 100px;
width: calc(100% - 20px);
}
}
@media (min-width:801px) {
ha-card {
left: calc(20% + 43px);
width: calc(60% - 30px);
}
}
card:
type: grid
square: false
columns: 5
cards:
- type: custom:button-card
icon: mdi:home-variant-outline
show_label: false
show_state: false
show_name: false
tap_action:
action: navigate
navigation_path: HOME
styles:
icon:
- width: 24px
- color: var(--gray000)
img_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:speaker
show_label: false
show_state: false
show_name: false
tap_action:
action: navigate
navigation_path: "#sonos"
styles:
icon:
- width: 24px
- color: var(--gray000)
img_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:home-lightning-bolt-outline
show_label: false
show_state: false
show_name: false
tap_action:
action: navigate
navigation_path: "#energia"
styles:
icon:
- width: 24px
- color: var(--gray000)
img_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:cctv
show_label: false
show_state: false
show_name: false
tap_action:
action: navigate
navigation_path: "#camaras"
styles:
icon:
- width: 24px
- color: var(--gray000)
img_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:nas
show_label: false
show_state: false
show_name: false
tap_action:
action: navigate
navigation_path: "#server"
styles:
icon:
- width: 24px
- color: var(--gray000)
img_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
Observa que puedes modificar el código libremente. Por ejemplo, si ajustas los valores que se encuentran dentro de ‘@media (min-width:180px)’ estos afectarán a cómo se vé la barra en pantallas pequeñas, como tu dispositivo móvil.
Además, aunque en principio está diseñada para ser una barra fija, si eliminas las siguientes líneas del código, podrás usarla como un elegante menú en cualquier lugar de tu panel.
z-index:6;
position: fixed;
