https://github.com/fastender/fast-navigation-card
A custom card for Home Assistant that provides a flexible navigation bar that can be positioned at the top, bottom or as a sidebar.
https://github.com/fastender/fast-navigation-card
hacs-plugin hassio home-assistant homeassistant lovelace-custom-card lovelace-ui navigation
Last synced: 8 months ago
JSON representation
A custom card for Home Assistant that provides a flexible navigation bar that can be positioned at the top, bottom or as a sidebar.
- Host: GitHub
- URL: https://github.com/fastender/fast-navigation-card
- Owner: fastender
- License: gpl-3.0
- Created: 2025-01-21T18:08:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-21T18:58:34.000Z (over 1 year ago)
- Last Synced: 2025-01-21T19:23:39.241Z (over 1 year ago)
- Topics: hacs-plugin, hassio, home-assistant, homeassistant, lovelace-custom-card, lovelace-ui, navigation
- Homepage:
- Size: 55.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fast Navigation Card
A custom card for Home Assistant that provides a flexible navigation bar that can be positioned at the top, bottom or as a sidebar.
## Important Note
This card is specifically designed for dashboards that have a maximum width of one section. It will not align correctly with dashboards that use multiple sections in their layout.
## Features
- Three positioning options: top, bottom, and sidebar
- Three background styles: solid, blur, and transparent
- Responsive design
- Automatic alignment with main content
- Supports grid layout for navigation buttons
- Perfect for single-section dashboard layouts
## Installation
### HACS (Custom Repository)
1. In HACS, click on "Frontend" section
2. Click the menu icon in the upper right and select "Custom repositories"
3. Add this repository URL: [https://github.com/fastender/Fast-Navigation-Card]
4. Select "Lovelace" as category
5. Click "Install"
### Manual Installation
1. Download `fast-navigation-card.js`
2. Copy it to your `www` folder
3. Add it as a resource in your Lovelace configuration:
```yaml
resources:
- url: /local/fast-navigation-card.js
type: module
```
## Usage
```yaml
# Basic usage with default settings
type: custom:fast-navigation-card
position: top # Options: 'top', 'bottom', 'sidebar'
card:
type: grid
# ... your grid configuration
# Usage with background style
type: custom:fast-navigation-card
position: bottom
background_style: blur # Options: 'solid', 'blur', 'transparent'
card:
type: grid
# ... your grid configuration
```
## Options
| Name | Type | Default | Description |
|------|------|---------|-------------|
| position | string | 'top' | Position of the navigation bar. Options: 'top', 'bottom', 'sidebar' |
| background_style | string | 'solid' | Style of the background. Options: 'solid', 'blur', 'transparent' |