Lovelace: Navbar Position - move the navigation bar to the bottom of the screen

Share your Projects! Dashboards & Frontend
1

Made a plugin to move the dashboard navigation bar to the bottom of the screen:

screenshot
screenshot575×800 68.1 KB

It does pretty much what you’d expect. The primary way to use it is by tacking a ?navbar=bottom onto the URL (or ?navbar=bottom&navbar_cache to save to localStorage, after which all dashboard renders on that device will move the navbar to the bottom by default). There’s also a card with a button that can be used to move the navbar in situations where it’s not possible to directly visit a URL (like from within the HA mobile apps).

Install via HACS, or by copying ha-navigation-bar.js to your Lovelace resources.

Hope y’all find it useful!

10 Likes
2

Nice plug in. Is there a way to only move the nav bar to the bottom on mobile apps but not in the browser?

3

any plans for updating this for HA version 2023.4.0?

3 Likes
4

How about center the nav bar? Anyone figure out how to do that via mod_card?

5

Cool plugin!
I think this is a must have on huge phones for one hand usage.
Is there a chance to make the bottom bar higher? Gesture swipes make it hard to use it.

6

Hi, how to unistall?
Removed recource from HA.
Remobed install from Hacs.

Still on bottom on mobile.
Cant find the custom card to remove. Pls help

7

Try restarting home assistant and delete front end cache on the device you are using

8

After 6 restarts and 5h it was on top again.

1 Like
9

card for mobile devices is not working, error says custom element doesent exist, is there any other way to make it work on companion app?