Navigation
Navigation is a system that enables users to move between different pages and sections of a website or application. You can think of it as the way users move around your web app - whether it's clicking a menu item to visit the Products page, using the back button to return to a previous page, or selecting a product to view its details. This is how users find and interact with different parts of your application.
Understanding URL paths
URL paths are the addresses of your pages - what users see in their browser's address bar. Think of them as street addresses for your website - they help users find exactly where they want to go.
Simple URLs
When you create a page in WeWeb, it automatically gets a simple URL. These URLs are straightforward and static, meaning they don't change.
For example, in the URL https://yourdomain.com/products
:
yourdomain.com
is your domain (your website's main address)/products
is the path to your specific page
Some examples of simple URLs:
URL | Description |
---|---|
/about | Your About page |
/products | Your Products page |
/contact | Your Contact page |
Path may only contain 'a-z', '0-9', '_', '-' and '/', and can only start and end with 'a-z' or '0-9'.
Dynamic URLs
Sometimes you need URLs that can change based on what content you're showing. These are called dynamic URLs, and they use parameters to change parts of the URL.
For example, in https://yourdomain.com/products/category/smartphones
:
/products/category
is your base path (static part)/smartphones
is a category parameter (dynamic part)
Setting up dynamic URLs
- Select your page from the Pages panel
- Click on "URL paths" in the page settings
- In the URL paths panel, you'll see:
- English unique path: This is where you set up your URL structure
- Parameters: These are the parts of your URL that can change
TIP
A dynamic product page URL might look like:
Template:
products/category/{{param}}
Real URL:
products/category/smartphones
Another URL:
products/category/beauty
Parameters always use double curly braces:
{{parameterName}}
Choose clear parameter names that describe their purpose
You can test your dynamic URLs using the default values in the editor
"English unique path" is the URL structure for accessing content in English, letting you define custom routes for each language.
For example, if you were building a multi-language site, you might have:
- English path:
/products/category/{{param}}
- French path:
/produits/categorie/{{param}}
- Spanish path:
/productos/categoria/{{param}}
WARNING
A page might work when previewing it in the editor in French, but will fail when visitors try to access it in English if you haven't created the English content version. Learn more about page languages:
TIP
✅ Dynamic URLs are better for:
- Product pages that change based on category or brand
- Blog posts with different articles
- User profiles
- Search results pages
Retrieve URL parameter value
Once you have defined URL parameters in your page settings, you can access them through WeWeb's Variables tab in the Formula editor. These parameters automatically update based on the URL, allowing you to fetch data for specific items, show or hide content based on the current value, filter collections and control component visibility.
For example, if your URL is /products/category/{{param}}
, you can use the parameter to fetch and display only products from that category:
TIP
- URL paths are only available on the page where you create them
- The Home page cannot have URL paths. To handle URLs like mydomain.com/1:
- Create a regular page (e.g., "Main") with URL path
{{id}}
- Add workflow "On page load" to Home
- Use
Navigate to
action to redirect to Main page
Example:
- User visits: mydomain.com (Home)
- Auto-redirects to: mydomain.com/1 (Main page)
- Users can now access mydomain.com/2, mydomain.com/3, etc.
Navigation methods
TIP
Consider using Multi-page sections for improved navigation performance
When navigating between pages, consider implementing multi-page sections to improve the performance of page transitions. Multi-page sections allow you to preload content from other pages, resulting in smoother transitions and faster loading times. This is especially beneficial for frequently accessed pages or when you want to create a seamless user experience.
You can learn more about multi-page sections in their dedicated documentation.
Now that you understand how URLs work in WeWeb, let's look at the three ways to navigate between pages:
Link
The most common way to navigate is using the Link to
property. This creates regular links that users can click on, just like standard website links. It's perfect for navigation menus, buttons, and any clickable elements.
For example, if you have a products page with URL parameters set up (/products/category/{{param}}
), you can create links to specific categories:
- Select any element you want to make clickable
- In the Settings tab, find the
Link
section - Choose the target page
- Add any URL parameters needed:
Assuming you are using the URL path in an API request to fetch a collection, you will get different results:
Link properties
Property | Description |
---|---|
Link to | Choose link type: Page (internal navigation), URL (external websites), Download (file downloads), Email (mailto:), or Phone (tel:) |
Page | When "Page" is selected, choose which page to navigate to (e.g., Products, About, Contact) |
Parameters | Define dynamic parameters for the URL (e.g., param = smartphones to create /products/category/smartphones) |
Section | Jump to specific sections: "Top of page", "Header Section", or "Main Section". Enables smooth scrolling to page areas |
Open in new page | Toggle to open link in new browser tab (On/Off) |
Queries | Add URL query parameters (?key=value) for filtering, sorting, or tracking. Examples: ?sort=price_asc, ?ref=homepage, ?campaign=summer |
Loader on page change | Display loading indicator during page transitions and data fetching |
TIP
- Disable the
Preserve collection on navigation
property so the collection can be "reset" when you navigate. Otherwise, your collection might show stale data from the previous page. - You do not need to reset URL paths. This is all done by WeWeb automatically.
Navigate to workflow action
Sometimes you need navigation to happen automatically, like after a form submission or when certain conditions are met. This is where the Navigate to action comes in.
Instead of waiting for a user to click, the Navigate to
workflow action can be triggered by:
- Form submissions
- API responses
- Button clicks with additional logic
- Workflow completions
Properties
Property | Description |
---|---|
Type | Choose navigation type: Internal link (page navigation) or External link (URL) |
Page/Path | Select destination: Page (internal pages) or Path (custom URL path) |
Page* | Select the target page to navigate to when "Page" is selected |
Section* | Choose section to scroll to: "Top of page", "Header Section", or "Main Section" |
Parameters | Define dynamic parameters for the URL (e.g., param = smartphones to create /products/category/smartphones) |
Open in a new tab | Toggle to control if navigation opens in new browser tab (On/Off) |
Queries | Add URL query parameters (?key=value) for filtering, search terms, or tracking |
Loader on page change | Show/Hide loading indicator during page transitions with "Show page loader" toggle |
Navigate to the previous page
Allows users to go back to their previous page, similar to clicking the browser's back button. This is useful for:
- "Back" buttons after form submissions
- "Return to previous page" links
- Cancel buttons that return users to where they came from
You can set a default redirect page (like Home) that users will go to if there's no previous page in their history.
TIP
A workflow is a series of actions that happen in response to a trigger. You can learn more about workflow actions here.
TIP
Link to vs Navigate to
Link to
- Creates HTML
<a>
tags in the published app - better for SEO and accessibility - Use for navigation menus and clickable elements
- Adds "Active link" state to the target element
Navigate to
- Uses JavaScript navigation - less optimal for SEO and accessibility
- More flexible for workflow automation and programmatic navigation
WARNING
Avoid setting both Link to
property and Navigate to
action on the same element - this can cause navigation conflicts in the editor.
Queries
URLs in WeWeb can have two types of parameters:
- Path parameters:
/products/category/{{param}}
- Query parameters:
/products?category=electronics
Query variables automatically capture and store URL query parameters. When you navigate to a page with query parameters, the corresponding query variables update to match the values in the URL.
Here's how they work:
- Create a query variable (e.g.,
searchTerm
) - Add it to the
Queries
property during navigation:
- Name: "searchTerm"
- Value: "smartphones"
The URL will update (e.g., yourpage?searchTerm=smartphones
) and the query variable searchTerm automatically updates to "smartphones".
You can use these variables anywhere in your app without writing any code!
To modify the query programatically, you can also use the Change variable value workflow action.
TIP
You might need query parameters for reset password flows. For example:
- User clicks reset password link:
myapp.com/reset-password?token=abc123
- The token query parameter is automatically captured by a query variable
- Your app can then use this variable to validate the reset password request
Query parameters are also perfect for sort and filter features, just like YouTube's video timestamp sharing (e.g., youtube.com/watch?v=123&t=150
). Users can share links/filtered views by simply copying the URL (e.g., products?sort=price_desc&category=phones
). The &
symbol in URLs is used to separate multiple query parameters.
SPA Navigation
A Single Page Application (SPA) works like a desktop app in your browser - instead of loading entire new pages when you click around, it just updates the parts that need to change.
Same page navigation
When navigating to the same page in WeWeb:
- Editor: Page will reload for preview purposes
- Published app: No page reload, content updates smoothly
To navigate to the same page to avoid page reloads in the published app, simply select the current page on navigation:
Now, in the published app, this is what will happen:
TIP
Navigating to the same page will trigger a page reload in the editor, but not in the published app, which is great for SPA navigation.
WARNING
Balance SPA navigation with dedicated pages
While SPA navigation can provide a smooth transition and improved user experience, it's important to create dedicated pages for distinct sections of your application. Sections like account settings and sign-in pages should generally be implemented as separate pages rather than all within a single page. Building too much on a single page can lead to difficulties in maintaining and scaling the page as more and more is built on the page.
Use SPA-style same-page navigation for smaller UI updates and transitions, but rely on dedicated pages for major functional areas of your application.
wwParams
When navigating in the editor, you might notice wwParam
appearing in your URLs. Don't worry - this is normal and only happens in the editor, not your published site. Here's why:
The WeWeb editor has two separate windows running at the same time:
- The editor window, where you see all your tools and settings
- A preview window (iframe) - where you see how your app looks
These windows need different kinds of information:
- The editor needs to know about your project settings, tools, etc.
- The preview needs to show your actual app
Why wwParams exists
When you navigate in your app using parameters (like /products/shoes
):
- The editor needs to know about this navigation
- The preview needs to show the right content
- Both windows need to stay in sync
wwParams
is WeWeb's solution to keep these two windows synchronized. It ensures that when you change pages or parameters in one window, the other window updates automatically to match.
In your published site, wwParams
isn't needed because there's only one window. It's just a tool to help during development.
WARNING
OAuth Testing
When implementing OAuth or any authentication with URL redirects, make sure to add both your published URL and editor URL to your OAuth provider's allowed redirect URLs. This ensures the authentication service works in both environments.
Current page data
The CurrentPage
object helps you access information about the page you're currently on. You can use it in formulas and workflows to get details about your page.
Common properties
Property | Description | Example |
---|---|---|
name | The name of your page | CurrentPage.name returns "Products" |
id | Unique identifier of the page | CurrentPage.id returns "bb851ad8-bac2-4878-b199-0dc3445efe37" |
path | The current URL path | CurrentPage.path returns "products/category/" |
lang | Page language code | CurrentPage.lang returns "en" |
Status properties
Property | Description |
---|---|
pageLoaded | Boolean indicating if page has finished loading |
folder | Parent folder of the page (if any) |
metaImage | Page meta image for SEO (if set) |
Additional properties
paths
: contains URL path informationlangs
: available language versionsmeta
: page meta informationtitle
: page title informationsections
: page sectionspageUserGroups
: access control groups
TIP
This is useful for:
- Display different content based on page name (e.g.,
"Welcome to " + CurrentPage.name
) - Create dynamic navigation text (e.g.,
If(CurrentPage.name = "Cart", then "Back" else "Cart"
) - Handle multiple languages (e.g.,
If(CurrentPage.lang = "en" then "Buy" else "Acheter"
) - Show/hide elements on specific pages (e.g.,
If CurrentPage.name != "Contact"
) - Create dynamic text combining page data (e.g.,
CurrentPage.name + " - " + CurrentPage.path
)