# \[FREE PLUGIN\] Spatial Navigation

**URL:** <https://forum.bubble.io/t/free-plugin-spatial-navigation/347131>\
**Category:** Showcase\
**Created:** [November 5, 2024, 3:32pm UTC](https://forum.bubble.io/t/free-plugin-spatial-navigation/347131 "2024-11-05T15:32:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![fernando2](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fernando2/32/145204_2.png) [@fernando2](https://forum.bubble.io/u/fernando2)\
**Post date:** [November 5, 2024, 3:32pm UTC](https://forum.bubble.io/t/free-plugin-spatial-navigation/347131/1 "2024-11-05T15:32:09Z")

</div>

Hello guys!

I’m releasing my first plugin, called [Spatial Navigation](https://bubble.io/plugin/spatial-navigation-1709222376735x530989172403994600) that allows you to navigate elements using your keyboard, gamepad or any other devices. Similar to what you get when navigating on a game console or TV.

![Demo (Library Nav)](https://us1.discourse-cdn.com/bubble/original/3X/b/1/b174fba03c10a84048e8461e1f2675017f85eb8e.gif)

Choose which elements are “focusable”, style its look and feel, and easily manage your user experience. Elements can also be grouped in Sections, to allow you finer control to determine which group of elements to enable or to navigate to at a time.

This plugin also includes a simple keyboard key detection option that allows you to detect specific key presses in your workflows.

Credit: This plugin implements and extends on the wonderful navigation library created by [Luke Chang](https://github.com/luke-chang/js-spatial-navigation/issues/35). 😉

Plugin Page: [Spatial Navigation Plugin | Bubble](https://bubble.io/plugin/spatial-navigation-1709222376735x530989172403994600)  
Demo Link: [Bubble | No-code apps](https://spatialnavdemo.bubbleapps.io/version-test/demo)  
Editor Link: [SpatialNavDemo | Bubble Editor](https://bubble.io/page?id=spatialnavdemo&tab=tabs-1&name=demo&type=page)

I’ve developed this plugin for a project of mine and decided to share it free with the Bubble community.

Hopefully it helps some of you!

---

<div class="post-metadata">

**Author:** ![JDeltree](https://avatars.discourse-cdn.com/v4/letter/j/e8c25b/32.png) [@JDeltree](https://forum.bubble.io/u/JDeltree)\
**Post date:** [May 23, 2025, 8:06am UTC](https://forum.bubble.io/t/free-plugin-spatial-navigation/347131/2 "2025-05-23T08:06:48Z")

</div>

Will this cycle through a repeating group with one item per page? That is, “right arrow” would jump to page two and “left arrow” would jump back to page 1.

---

<div class="post-metadata">

**Author:** ![fernando2](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fernando2/32/145204_2.png) [@fernando2](https://forum.bubble.io/u/fernando2)\
**Post date:** [May 27, 2025, 10:29pm UTC](https://forum.bubble.io/t/free-plugin-spatial-navigation/347131/3 "2025-05-27T22:29:08Z")

</div>

Technically yes.

You would watch for a “Element was focused” event with a condition where “Focused Element Index = [your last cell index number]” and then trigger an action to switch the page and then focus on the first element of the next page.

[Instructions here.](https://docs.google.com/document/d/1JHkCxUCa6qIL23M4maUVs8guzkFkedYC_m-AuirgFPc/edit?tab=t.0#heading=h.kkgxhl2exd59)