Link to the plugin page: https://zeroqode.com/plugin/1561029119588x805863213854327600
Demo to preview the plugin:
Introduction
The URL Router for Navigation plugin enhances URL routing and navigation in Bubble apps without requiring page reloads. It allows you to dynamically modify the URL, extract segments, and trigger workflows based on URL changes, making it ideal for single-page applications (SPAs) and structured navigation.
Key Features
Prerequisites
- This plugin can be used on any Bubble page except the index page.
- Ensure your app structure supports dynamic URL-based navigation for the best experience.
👛 Please support our efforts to keep this plugin free—your donations help us invest the time and resources needed to continue maintaining and improving it for everyone’s benefit: https://zeroqo.de/support.
How to setup
Step 1: Installation
Step 2: Place the Element
Step 3: Data Types
Step 4: Custom States
Step 5: Repeating Groups and Workflows
Step 6: Configuring Go back A Router and Go Forward A Router
Plugin Element Properties
Router
Fields:
Title | Description | Type |
1st Parameter (Optional) | Name of the first parameter you want to fetch from the URL | Text (optional) |
2nd Parameter (Optional) | Name of the second parameter you want to fetch from the URL | Text (optional) |
Element Actions
- Change URL - The Change URL action allows you to update the browser’s URL without refreshing the page. This is useful for creating dynamic and SEO-friendly URLs while keeping the user experience smooth.
Title | Description | Type |
New_url | Refers to the new URL path that will replace the current URL in the browser. This parameter defines what the updated URL should look like. | Text (optional) |
- Go Back - The Go Back action allows users to navigate backward in their browser history without reloading the page. This works similarly to clicking the browser's back button but is controlled within your Bubble app.
- Go Forward - The Go Forward action allows users to move forward in their browser history if they have previously used the Go Back action. It behaves like clicking the browser’s forward button
Exposed states
Title | Description | Type |
1st Path | Extracts the first segment of the URL path after the domain. | Text |
2nd Path | Extracts the second segment of the URL path. | Text |
3rd Path | Extracts the third segment of the URL path. | Text |
Path list | Returns all segments of the URL as a list of texts, separated by /. | Text |
Full Path | Returns the entire URL path after the domain. | Text |
4th Path | Extracts the fourth segment of the URL path.
| Text |
1st Parameter | Extracts the first query parameter from the URL. | Text |
2nd Parameter | Extracts the second query parameter from the URL | Text |
Element Events
Title | Description |
URL Changes | This event is triggered whenever the URL of the page changes without a full page reload.
|
Changelogs