HKI Navigation Card

A highly customizable floating navigation button card for Home Assistant with support for horizontal and vertical button layouts, conditional visibility, and extensive styling options.

NOTE: HKI Cards were created for use with the visual editor in Home Assistant, it is possible that the documentation is not complete for all features when using YAML instead. If you think this documentation is missing something or needs editing, please open an issue or create a PR with the changes.

Features

🎯 Layout Options

Dual Layouts - Independent horizontal and vertical button groups that can be used simultaneously
Flexible Positioning - 9 position presets plus custom pixel offsets
Responsive Offsets - Different offsets for mobile, tablet, and desktop
Bottom Bar - Optional floating bottom navigation bar
Base Button - Always-visible button that can toggle horizontal/vertical groups

🎨 Styling & Appearance

Button Types - Icon only, icon with labels (below/left/right), or pill buttons
Per-Button Styling - Override global styles on individual buttons
Label Customization - Font size, weight, spacing, colors, backgrounds, and blur effects
Shadows & Borders - Customizable box shadows, borders, and border radius
Templates - Jinja2 template support for dynamic icons, labels, and tooltips

🎬 Interactivity

Multiple Actions - Tap, hold, and double-tap actions per button
Entity Integration - Toggle entities, show more-info dialogs, or call services
Navigation - Navigate to views or open URLs
Group Toggling - Show/hide horizontal or vertical button groups
Conditional Display - Show/hide buttons based on entity states, users, views, or screen size

🔧 Advanced Features

Condition Logic - Use "all" or "any" mode for multiple conditions
Z-Index Control - Layer buttons above or below other elements
Reserve Space - Prevent content from sliding under floating buttons
Real-time Updates - Templates update automatically when entities change