# How to create dynamic pages based on user input in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Dynamic pages in Bubble display different content based on data passed through the URL. You set a page type, send data when navigating, and use Current Page's [Type] to display the record's fields. This tutorial covers setting up dynamic pages, passing data via URL, and building SEO-friendly dynamic content.

## Overview: Dynamic Pages in Bubble

Dynamic pages are the foundation of data-driven apps. Instead of creating a separate page for every blog post, product, or user profile, you create one page template that displays different content based on the data passed to it. Bubble handles this through page types and URL-based data passing.

## Before you start

- A Bubble app with Data Types containing records
- Basic understanding of Bubble page creation and navigation
- Familiarity with workflows and dynamic expressions

## Step-by-step guide

### 1. Set the page type on your dynamic page

Create a new page (e.g., product-detail). In the page settings (click the gear icon in the top-left), set the Type of content to your Data Type (e.g., Product). This tells Bubble that this page expects a Product record as its context. You can now use Current Page Product in any dynamic expression on the page.

**Expected result:** The page has a type set and can access Current Page Product's fields.

### 2. Add elements that display dynamic data

On the page, add elements that reference the page data. Add a Text element with content: Current Page Product's title. Add an Image element with source: Current Page Product's image. Add a Text element for the description: Current Page Product's description. Every element on the page can reference Current Page Product's fields for its content.

**Expected result:** Page elements display data from whatever Product record is passed to the page.

### 3. Navigate to the dynamic page with data

From another page (e.g., a product listing), add a link or button. In the workflow, add Go to page: product-detail. In the Data to send field, set it to the specific Product record — typically Current cell's Product when inside a Repeating Group. Bubble constructs the URL automatically, including the record's Unique ID.

> Pro tip: For cleaner URLs, set a slug on your records using the Set a Thing's Slug action. The URL becomes /product-detail/blue-sneakers instead of /product-detail/1234567890.

**Expected result:** Clicking a product in the listing navigates to the detail page showing that product's data.

### 4. Set up SEO-friendly slugs

Go to the Data tab and ensure your Data Type has slug values set. When creating records, add the action Set a Thing's Slug after creating the record — Bubble generates a URL-friendly version of the text you provide (e.g., the product title). On the dynamic page, Bubble uses the slug in the URL: /product-detail/blue-sneakers-running-shoe.

**Expected result:** Dynamic pages have clean, readable URLs using slugs instead of Unique IDs.

### 5. Handle missing or invalid page data

Add a Page is loaded workflow with the condition: Only when Current Page Product is empty. In the action, navigate to a 404 page or redirect to the listing page. This handles cases where a user visits a dynamic page URL that does not match any record (e.g., a deleted product or a mistyped URL).

**Expected result:** Users who visit invalid dynamic page URLs are redirected gracefully instead of seeing a blank page.

## Complete code example

File: `Workflow summary`

```text
DYNAMIC PAGES SUMMARY
======================

PAGE SETUP:
  Page: product-detail
  Type of content: Product
  
  Elements:
    Text (H1): Current Page Product's title
    Image: Current Page Product's image
    Text: Current Page Product's description
    Text: Current Page Product's price :formatted as $#,##0.00
    Text: Current Page Product's category's Display

NAVIGATION TO DYNAMIC PAGE:
  From listing page (inside Repeating Group):
    Link destination: product-detail
    Data to send: Current cell's Product
  
  URL result:
    With Unique ID: /product-detail/1234567890x1234
    With slug: /product-detail/blue-sneakers-running-shoe

SLUG SETUP:
  When creating a Product:
    1. Create a new Product → title, price, etc.
    2. Set a Thing's Slug on Result of Step 1
       → Slug source: Result of Step 1's title

ERROR HANDLING:
  Page is loaded:
    Only when: Current Page Product is empty
    Action: Go to page: 404 (or product listing)

SEO META TAGS (page settings):
  Page title: Current Page Product's title
  Meta description: Current Page Product's excerpt
  OG image: Current Page Product's image

DYNAMIC PAGE TYPES:
  /blog-post/[slug]    → type: Post
  /product/[slug]      → type: Product
  /user-profile/[slug] → type: User
  /event/[slug]        → type: Event
```

## Common mistakes

- **Forgetting to set the page type before adding dynamic elements** — Without a page type, you cannot access Current Page's DataType in dynamic expressions Fix: Set the Type of content in page settings first, then add elements with dynamic references
- **Not setting slugs on records** — Without slugs, URLs contain cryptic Unique IDs that are bad for SEO and user experience Fix: Use Set a Thing's Slug when creating records to generate clean, readable URLs
- **Not handling empty page data** — If a user visits a dynamic page URL for a deleted or non-existent record, they see a blank page Fix: Add a Page is loaded check that redirects when Current Page's data is empty

## Best practices

- Always set slugs on records for SEO-friendly URLs
- Handle empty page data with a redirect to prevent blank pages
- Set dynamic SEO meta tags in the page settings using Current Page data
- Use the data type's slug for URLs instead of Unique IDs
- Test dynamic pages by navigating from listing pages and by entering URLs directly
- Pre-generate slugs for existing records using a backend workflow

## Frequently asked questions

### What is the difference between page data and URL parameters?

Page data passes a full database record to the page via the URL (using Unique ID or slug). URL parameters pass individual text/number values via ?key=value. Use page data for database records and URL parameters for filters or settings.

### Can a page have data from multiple Data Types?

A page can only have one Type of content, but you can access related data through field references. For example, a Product page can access Current Page Product's category's name.

### How do I generate slugs for existing records?

Create a backend workflow that processes each existing record using Schedule API on a List and applies Set a Thing's Slug based on the record's title or name.

### Do dynamic pages work for SEO?

Yes. Bubble renders dynamic page content server-side for search engine crawlers. Set meta tags dynamically and include pages in your sitemap for best results.

### Can I pass data without showing it in the URL?

Not with page types (the ID or slug is always in the URL). For truly hidden data, use URL parameters or custom states set on page load. RapidDev can help design optimal URL and data passing strategies.

### What if two records have the same slug?

Bubble prevents duplicate slugs within the same Data Type. If you try to set a slug that already exists, Bubble appends a number to make it unique.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-dynamic-pages-user-input-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-dynamic-pages-user-input-bubble