HKI Navigation Card

jimz011 · January 7, 2026, 11:27pm

I have made (with help of AI) a card for Home Assistant that gives you the ability to have a very powerful and customizable navigation bar. This card has so much configurable options that it is pretty much impossible to show it all in just a few screenshots. I’d recommend that you try it instead!

It is fully configurable via the UI and supports the sections dashboard.
You may also be interested in HKI PostNL Card and HKI Header Card

The card does have bugs though, so use with caution .

Why the name HKI? Well in the past I shared a complete dashboard called Homekit Infused. And for the lack of a better name I simply gave it the same abbreviation, so bite me . I hope someone will enjoy this card.

Screenshots

Core Features

Fixed-position floating buttons - Stay visible while scrolling
Responsive design - Automatic sidebar detection and responsive positioning
Multiple layouts - Corner, center, and spread positioning options
Dynamic visibility - Show/hide buttons based on conditions
Advanced styling - Custom colors, shadows, backgrounds, and more

Button Features

Multiple button types - Icon, pill, or icon+label combinations
Customizable appearance - Per-button backgrounds, colors, and opacity
Flexible sizing - Adjustable button sizes and gaps
Smart labels - Auto-show on hover with customizable styling
Action support - Tap, hold, and double-tap actions

Layout Options

Bottom right - Classic floating action button position
Bottom left - Alternative corner positioning
Bottom center - Centered navigation bar
Center spread - Distribute buttons across the full width
Horizontal & vertical - Organize buttons in rows and columns

Advanced Features

Bottom bar overlay - Optional backdrop behind buttons (experimental)
Screen-size overrides - Different offsets for mobile/tablet/desktop
Label customization - Full control over label styling and positioning
Base button - Always-visible anchor button with expandable groups
Z-index control - Precise layering control

Installation

HACS (Recommended)

Open HACS in your Home Assistant instance
Go to “Frontend”
Click the menu in the top right and select “Custom repositories”
Add https://github.com/jimz011/hki-navigation-card as a Lovelace repository
Click “Download” on the HKI Navigation Card
Restart Home Assistant

Manual Installation

Download hki-navigation-card.js from the latest release
Copy it to <config>/www/ (create the folder if it doesn’t exist)
Add the resource in your Lovelace configuration:

resources:
- url: /local/hki-navigation-card.js
  type: module

For configuration please check the docs at GitHub - jimz011/hki-navigation-card: A fully customizable navigation bar for Home Assistant

jimz011 · January 9, 2026, 10:05pm

1.0.1

Changes:

Refactored and optimized code for speed and less CPU usage
Removed unused/deprecated code
Code reduced by 50% giving the card a much smaller footprint and better performance
You can now see the installed version in the console

jimz011 · January 13, 2026, 1:17am

1.0.2

Changes:

Re-ordered the visual editor for more clearance, it is now easier to navigate the settings
Added a lightweight jinja parser to show {{ user }} and {{ version }}
Bugfixes

jimz011 · January 26, 2026, 11:26pm

1.2.0

Changes:

Action conflict cleanup - When you set an action (like navigate), conflicting properties (like url) are automatically removed
Minimal config - Defaults are no longer saved to YAML unless you change them, keeping configs clean
Config validation on start - Automatic cleanup removes duplicates and validates the config when the card loads
Better nested hierarchy - Restructured for much cleaner YAML:
Auto-migration - Old configs automatically convert to the new structure without breaking
Sometimes buttons would become unresponsive when the HA app becomes idle or when navigating from another dashboard. This should be addressed, but if you do bump into problems please notify me!

For notes between 1.0.2 and the current version please visit the repo!