Skip to content
↔️ Swipe through Lovelace views on mobile.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Create LICENSE May 2, 2019 Update Jun 13, 2019
example.gif Add files via upload May 21, 2019 Update Jun 13, 2019
swipe-navigation.js Update ignored elements Dec 27, 2019

Lovelace Swipe Navigation

Swipe through Lovelace views on mobile.

Buy Me A Coffee

This is included as a feature in compact-custom-header, there is no need to install this if you already use CCH.


  • Animated swiping through Lovelace views.
  • Configure views to skip over.
  • Set the swipe length needed.
  • Option to disable a browsers default swipe actions.
  • Wrap from first view to last view and vice versa.


Follow only one of these installation methods.

Manual installation:
  1. Copy swipe-navigation.js into /www/lovelace-swipe-navigation/

  2. Add the resource in ui-lovelace.yaml or by using the "Raw Config Editor".

  # increase this version number at end of URL after each update
  - url: /local/lovelace-swipe-navigation/swipe-navigation.js?v=1.0.0
    type: js
  1. Refresh the page.
Installation and tracking with HACS:
  1. In "store" search for lovelace-swipe-navigation and install.

  2. Configure Lovelace to load the card:

  - url: /community_plugin/lovelace-swipe-navigation/swipe-navigation.js
    type: js
  1. Refresh the Lovelace page.


Configuration is done in the root of your lovelace configuration.


  - url: /local/lovelace-swipe-navigation/swipe-navigation.js?v=1.0.0
    type: js

  wrap: false
  animate: swipe
  skip_tabs: 5,6,7,8
  prevent_default: true
  swipe_amount: 30

Config Options:

Name Type Default Description
swipe_amount number 15 Minimum percent of screen needed to be swiped in order to navigate.
skip_tabs string A comma seperated list of views to skip when swiping. e.g., 1,3,5.
wrap boolean true Wrap from first tab to last tab and vice versa.
prevent_default boolean false Prevents the browsers default horizontal swipe actions.
animate string no animation Swipe animations. Can be: swipe, fade, flip.

Thank you

Big thanks to:

You can’t perform that action at this time.