🔎 Material Header (Beta)

NOTE

✨ Available on 💎 Ultimate Version Only

✨ Overview

The Material Header seamlessly integrates into Home Assistant's native top toolbar, replacing the default elements with a beautifully crafted, Material Design 3 inspired search bar and user profile chip. It enhances the visual appeal and functionality of your dashboard's header while maintaining full compatibility with the native layout.

☀️ Light Mode

🌙 Dark Mode

✨ Key Features

• Global Integration: Adding it once to your dashboard modifies the top toolbar across all views.
• Dynamic Search Bar: A sleek, customizable search bar that dynamically shows the current view's title.
• Smart Behaviors: Configure the search bar to trigger the global search or Home Assistant's Assist voice interface.
• User Profile Chip: Replaces the native overflow menu (three dots) with an elegant user profile chip displaying your avatar.
• Edit Mode Safe: Automatically hides itself when entering dashboard Edit Mode, restoring native elements so you can edit your dashboard without interference.

⚙️ Configuration

Name	Type	Default	Description
type	string	Required	custom:material-header
show_search	boolean	true	Whether to display the Material search bar.
search_behavior	string	assist	Action triggered when clicking the search bar (assist or search).
icon	string	mdi:star-four-points	Icon displayed inside the search bar.
show_user	boolean	true	Whether to replace the native overflow menu with the user profile chip.

🚀 Usage Examples

Example Configuration:

type: custom:material-header
show_search: true
search_behavior: assist
icon: mdi:microphone
show_user: true

⚠️ Important Note

Since this component modifies the global Home Assistant toolbar, it will only appear correctly when added to a Lovelace view. Furthermore, it must be added to your main Home Assistant dashboard to ensure proper core functionality. Due to its global nature, it is hidden inside the Card Editor preview to prevent duplicating the Home Assistant header during configuration.