Add new toggle to hide top header in Lovelace UI

[LeoCal]

Hello,

It would be great if a configuration toggle could be added to hide the top header in Lovelace UI.
There are many use cases where a user might wish to hide the top header to have a full-screen kiosk-like user interface.

Home assistant 0.117 has made a big step forward in this direction by making the header more compact and combining the original two rows into a single one. This was made possible thanks to the work done by @MAYKER (thanks for that!), who ported the code he initially wrote for the unofficial custom component “custom header” into Home Assistant Core.
He has then made another custom component called “Kiosk-mode” that allows to hide the top bar as well. However, I think this should be a built-in feature by Home Assistant.

I would suggest adding a toggle, right below the one that already allows to “Always hide the sidebar” in the user settings.

What do you think?

[KTibow]

This might be relevant: #7614 (reply in thread)

[kataweina]

Yes, I agree, the work @MAYKER did deserves to be included in Core :)

+1

[zgadson]

This Awesome Library accomplishes the task

Unfortunately it looks like Fully Kiosk is no longer supported. Hiding the header bar no longer works. Personally, I think Home Assistant needs this ability by default and should not depend on 3rd party integrations for such a simple ask.

Thoughts on reopening this case?

[LeoCal]

I agree, I would still love to see this implemented.

However, I guess the only way to get this considered for implementation is to reach a good number of people voting for it and right now this only got 8:
https://community.home-assistant.io/t/add-new-toggle-to-hide-top-header-in-lovelace-ui/273094

If you also find this feature useful, consider adding your vote there :-)

[zgadson]

I did actually get it working again. Home Assistant told me the Fully Kiosk integration was being archived and at the time either Home Assistant deleted the Fully Kiosk integration, or I removed it myself thinking it wouldn't work anymore. Either way, reinstalling the Fully Kiosk HACS add-on fixed my problem.

That said, Fully Kiosk still has no future support, so getting this functionality into Home Assistant now would be to our benefit.

[HarvsG]

Hi, would also like this, and also to fully hide the side bar!

[LeoCal]

You can already hide the side bar from the settings

…

Il giorno 19 lug 2022, alle ore 16:45, HarvsG ***@***.***> ha scritto:  Hi, would also like this, and also to fully hide the side bar! — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[OvisMaximus]

I'd also wish to hide the tab bar at the top. When I hide it by setting the view to be a sub view the tab bar is just replaced by a bar showing the name of the view and a back button. The goal to free the space of the tab bar for my configured widgets is still not reached.

Please implement an option to hide the bar on top completely for a view.

I'm using a 7" display on a raspberry as my bedroom clock. I want it to display a clock, the weather forecast for the next 24h, a calendar view and some buttons to trigger scripts like snooze alarm, switch tv on, activate/reset/disable the sleep timer of the tv. The tab bar wastes one fifth of the screen space.

[andywarburton]

I know this is an old issue, but somehow it still isn't easily achieved in 2024. Lots of searching suggests various ways using HACS but none of them seem to actually work (and even if they did, they aren't exactly user friendly)

[nikmedoed]

I would really like to see this feature as well.

I see two options:

1. Action in the header menu

   • In the navigation header menu (next to the dashboard title) there is an item “Full screen”.
   • When selecting this action, the header is hidden and the dashboard takes up the whole screen.
   • A button appears in the top corner to exit this mode. It automatically disappears after 5 seconds of inactivity and reappears on any user action (click, touch, scroll).

2. Persistent client-specific setting (useful for the mobile app)

   • In the user profile settings, add an option “Always hide the header”.
   • When enabled, the header is completely removed and replaced with a small button in the top right corner. This button automatically disappears after 5 seconds of inactivity and reappears on any user action (click, touch, scroll).

It doesn’t seem too hard to implement with LLM assistance, but setting up the dev environment turned out to be non-trivial, and I don’t have time to dig into it right now.

Any other ideas for implementation?

I worked around it with https://github.com/NemesisRE/kiosk-mode, but I’d prefer a native solution. The drawback is that it hides the header completely, so I lose the ability to access settings or switch dashboards — I have to toggle the header off and on again just to navigate.

kiosk_mode:
  user_settings:
    - users:
        - "your kiosk user"
      hide_header: true