Skip to content
⬆️ CCH - Customize the header and add enhancements to Lovelace. Features: kiosk mode, conditional header styling, per user/device views, swiping between views on mobile, and more.
JavaScript Other
Branch: master
Clone or download
Latest commit ee32760 Sep 14, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.devcontainer Adds devcontainer Jul 20, 2019
.github Update issue-close-app.yml Jul 13, 2019
.vscode Adds devcontainer Jul 20, 2019
docs add comment warning Sep 13, 2019
LICENSE Update LICENSE Jun 19, 2019
compact-custom-header.js Tweak view observer Aug 25, 2019 Update Jul 30, 2019
mkdocs.yml Update Docs Jun 22, 2019 Update Jul 30, 2019

Compact Custom Header

Customize the Home Assistant header and much more!

Buy Me A Coffee

See the Docs for installation and configuration.

Follow the troubleshooting guide before submitting issues here or on the forums.


  • Compact design that removes header text.
  • Per user/device settings.
  • Hide tabs/buttons from user's and devices.
  • Style & hide anything in the header & the header itself.
  • Dynamically style header elements based on entity states/attributes.
  • Add swipe navigation to Lovelace for mobile devices.
  • Any button can be hidden, turned into clock with optional date, or placed in the options menu.
  • Set a default/starting view.



Conditional Styling Demo:

Important Notes

  • Hiding the header or the options button will remove your ability to edit from the UI.
  • You can disable CCH by adding "?disable_cch" to the end of your URL.
  • After using the raw config editor you will need to refresh the page to restore CCH.
  • While in edit mode select "Show All Tabs" in the options menu to display hidden tabs.

This card requires type: module. More info in the installation instructions

  - url: /local/custom-lovelace/compact-custom-header/compact-custom-header.js?v=0.0.1
    type: module
You can’t perform that action at this time.