I would love to be able to have a small clock on every dashboard I use, because some I don’t have space for a clock but have that dashboard up on a tablet in a room. I use joseluis9595/lovelace-navbar-card and copy it to all my dashboards. Any help would be greatly appreciated!!!
The question is has anyone or does anyone know if there is a way to show the current time as a route on the navbar card?
Here is what the navbar looks like, I’d love a little clock before the hockey puck:
Hoping I can get it like this:
Here is the yaml code:
type: custom:navbar-card
routes:
- url: /dashboard-paul/paulhome
icon: mdi:hockey-puck
label: Paul Home
badge:
show: false
selected_color: mediumpurple
icon_color: mediumpurple
- icon: mdi:cctv
label: Cameras
url: /dashboard-paul/cameras
selected_color: deepskyblue
icon_color: deepskyblue
- icon: mdi:lightbulb-group-outline
label: Lights Mobile
url: /dashboard-paul/lights-mobile
selected_color: springgreen
icon_color: springgreen
- icon: mdi:patio-heater
url: /dashboard-paul/lights-outdoor
selected_color: gold
icon_color: gold
- icon: mdi:vanity-light
label: Other Devices
url: /dashboard-paul/lights-2
selected_color: blue
icon_color: blue
- icon: mdi:ip-network
label: LAN Network
url: /dashboard-paul/lannetwork
selected_color: deeppink
icon_color: deeppink
- icon: mdi:account-group
label: Family Location
url: /dashboard-paul/family-location
selected_color: darkorange
icon_color: darkorange
- icon: mdi:test-tube
label: Testing
url: /dashboard-paul/testing-home
selected_color: blueviolet
icon_color: blueviolet
- url: null
icon: mdi:dots-horizontal-circle
label: More Settings
popup:
- icon: mdi:account-box
label: Profile
url: /profile/general
- icon: mdi:home
label: Home
url: /dashboard-home/0
- icon: mdi:cart
label: Shopping List
url: /todo?entity_id=todo.shopping_list
- icon: mdi:fridge
label: Kitchen
url: /kitchen-home/0
- icon: mdi:camera
label: Media
url: /media-browser/browser
- icon: mdi:cogs
label: System
url: /config/system
- icon: mdi:devices
label: Devices/Ints
url: /config/integrations/dashboard
- icon: mdi:creation
label: Automations
url: /config/automation/dashboard
tap_action:
action: open-popup
selected_color: yellowgreen
icon_color: yellowgreen
- icon: mdi:dots-horizontal-circle-outline
label: Even More Settings
url: null
popup:
- icon: mdi:dev-to
label: Developer Options
url: /developer-tools/yaml
- icon: mdi:server
label: Browser-Mod
url: /browser-mod
- icon: mdi:home-automation
label: HACS
url: /hacs/dashboard
- icon: mdi:ssh
label: Terminal
url: /core_ssh/ingress
- icon: mdi:file-cog
label: File Editor
url: /core_configurator/ingress
- icon: mdi:zigbee
label: Zigbee2MQTT
url: /45df7312_zigbee2mqtt/ingress
- icon: mdi:cog
label: Settings
url: /config/dashboard
- icon: mdi:z-wave
label: Z-Wave JS UI
url: /a0d7b954_zwavejs2mqtt/ingress
tap_action:
action: open-popup
selected_color: aqua
icon_color: aqua
desktop:
position: left
show_popup_label_backgrounds: true
show_labels: popup_only
mobile:
show_labels: popup_only
haptic:
url: true
tap_action: true
hold_action: true
double_tap_action: true
grid_options:
columns: full
layout:
auto_padding:
enabled: true
desktop_px: null
mobile_px: null
card_mod:
style: |
ha-card {
background: rgba(0, 0, 0, 0.6)
}
I have tried doing this using a badge but the Clock icon is the only thing displayed:
card:
type: custom:navbar-card
routes:
- icon: mdi:clock-outline
label: Time
url: null
tap_action:
action: none
icon_color: white
badge:
show: true
color: transparent
count: "${states['sensor.12h_time'].state}"
- url: /dashboard-paul/paulhome
icon: mdi:hockey-puck
label: Paul Home