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.
Prerequisites
- 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
Set the page type on your dynamic page
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.
Add elements that display dynamic data
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.
Navigate to the dynamic page with data
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.
Set up SEO-friendly slugs
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.
Handle missing or invalid page data
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 working example
1DYNAMIC PAGES SUMMARY2======================34PAGE SETUP:5 Page: product-detail6 Type of content: Product7 8 Elements:9 Text (H1): Current Page Product's title10 Image: Current Page Product's image11 Text: Current Page Product's description12 Text: Current Page Product's price :formatted as $#,##0.0013 Text: Current Page Product's category's Display1415NAVIGATION TO DYNAMIC PAGE:16 From listing page (inside Repeating Group):17 Link destination: product-detail18 Data to send: Current cell's Product19 20 URL result:21 With Unique ID: /product-detail/1234567890x123422 With slug: /product-detail/blue-sneakers-running-shoe2324SLUG SETUP:25 When creating a Product:26 1. Create a new Product → title, price, etc.27 2. Set a Thing's Slug on Result of Step 128 → Slug source: Result of Step 1's title2930ERROR HANDLING:31 Page is loaded:32 Only when: Current Page Product is empty33 Action: Go to page: 404 (or product listing)3435SEO META TAGS (page settings):36 Page title: Current Page Product's title37 Meta description: Current Page Product's excerpt38 OG image: Current Page Product's image3940DYNAMIC PAGE TYPES:41 /blog-post/[slug] → type: Post42 /product/[slug] → type: Product43 /user-profile/[slug] → type: User44 /event/[slug] → type: EventCommon mistakes when creating dynamic pages based on user input in Bubble.io: Step-by-Step Guide
Why it's a problem: Forgetting to set the page type before adding dynamic elements
How to avoid: Set the Type of content in page settings first, then add elements with dynamic references
Why it's a problem: Not setting slugs on records
How to avoid: Use Set a Thing's Slug when creating records to generate clean, readable URLs
Why it's a problem: Not handling empty page data
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to create dynamic pages in Bubble.io for my product catalog. Each product should have its own page with a unique, SEO-friendly URL. How do I set up the page type, pass data, generate slugs, and handle missing products?
Create dynamic product detail pages for my app. Each product should have its own URL with an SEO-friendly slug. Set up the page type, navigation, and meta tags. Handle the case where a product does not exist.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation