https://github.com/devfle/easy-sticky-nav
An easy way to add a modern sticky bottom navigation to your Home-Assistant installation.
https://github.com/devfle/easy-sticky-nav
Last synced: 5 months ago
JSON representation
An easy way to add a modern sticky bottom navigation to your Home-Assistant installation.
- Host: GitHub
- URL: https://github.com/devfle/easy-sticky-nav
- Owner: devfle
- Created: 2025-08-02T21:43:34.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-08-02T22:09:09.000Z (6 months ago)
- Last Synced: 2025-08-02T23:34:18.447Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 10.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Easy Sticky Nav
An easy way to add a modern sticky bottom navigation to your Home-Assistant installation.
## Options
| Property | Type | Required | Description |
| ------------- | --------------------- | -------- | ------------------------------------------------------------------ |
| `color` | `string` | ❌ No | Color of the navigation bar (e.g., hex, rgb, or CSS color name). |
| `background` | `string` | ❌ No | Background color of the navigation bar. |
| `bottomSpace` | `string` | ❌ No | Space below the bar. |
| `minWidth` | `string` | ❌ No | Minimum screen width for the bar to appear. |
| `hide_header` | `boolean` | ❌ No | Hides the default Home Assistant header if `true`. |
| `nav_items` | `NavigationElement[]` | ✅ Yes | Array of navigation elements to display in the sticky nav. |
### NavItem Settings
| Field | Type | Required | Description |
| ------ | -------- | -------- | ---------------------------------------------------------------- |
| `icon` | `string` | ✅ Yes | A Material Design Icon (e.g., `mdi:home-outline`). |
| `url` | `string` | ✅ Yes | The path or URL to navigate to. |
## Example
```yaml
type: custom:easy-sticky-nav
hide_header: true
nav_items:
- name: Home
icon: mdi:home-outline
url: /dashboard-dashboard/home
- name: User Settings
icon: mdi:account-outline
url: /profile/general
- name: Notification
icon: mdi:bell-outline
url: "#"
- name: Settings
icon: mdi:cog-outline
url: /config/dashboard
```
## Notice
If you hide the header you can still enter the edit-mode of Home-Assistant with:
```text
?edit=1
```
## Installation
1. Build the project `npm run build`
2. Copy the `dist/main.js` file to your Home-Assistant instance inside the `www` folder (I suggest renaming main.js into easy-sticky-nav.js)
3. Include and load the file from your Home-Assistant settings
4. Add the custom card config to your dashboard