Creating a Page Structure

An application can have as many pages as you need. A page is generally useful for one purpose, for example, the sign up page, about page, homepage, etc.

Adding new pages

You can create new pages from the top bar of the Editor. A page can start blank or be the clone of another page. When a page is cloned, the entire page, including workflows will be copied and used as the basis for the new page.

Navigating users among pages

There are two ways you can navigate your users among your app's pages. You can either use a Link element, or 'Go to page action' if the navigation should happen in a workflow. Note that links should be preferred (instead of using a button that triggers a workflow that changes the page), as it relies on the browser native link element. The page change will be faster and your users will be able to right click on the link to open the page in a new tab. On the other hand, a change page action cannot open another tab, as the browser's protection against popups will block the tab creation.

Note that once a page is changed, the workflow will terminate. Therefore, a change page action should be the last action in the workflow, and the Issue Checker will catch situations where that isn't the case. If you use a condition on the change page action, the Issue Checker won't flag this as an issue, but it is your responsibility to make sure if such an action executes (a change page action with the condition), following actions do not need to get run. If the destination page has a type of content, you will need to define the thing to send to that page, both at the link or the action level.

Multi-page vs single-page apps

There are in general two main options you can follow to build an app. You can either use many different pages (multi-page application) or limit the number of pages and have a page be multi-function (single-page application), and use groups that you show and hide under certain conditions to show how the page looks and what it does under specific circumstances.

When you build a single-page application, conditions and custom states will be extremely useful to control which element is visible and when. Performance-wise, both options have different trade-offs: a multi-page application will lead to faster page loads, but more frequent page changes, while single-page apps will have a slower initial page load, but won't have page transition. Naturally, your eventual choice can be an intermediate between both paths.

Organizing your application is not an exact science, but more of an art. In many circumstances, more than one option is a viable path for your app. Experience and personal preference will be key as you build your app. We strongly recommend asking for help on the forum, as app organization is something other users can be extremely helpful with. The general rule is to build something that makes sense to you.

Advanced FAQs about navigation

Is it possible to change the parameters or path of a page without explicitly reloading or doing "Go to..." the new URL?

This is an especially common request with single-page applications. At the moment, there is not a native way to change the URL of a page without actually "going to" that page, but a couple of 3rd party plugins in the Bubble ecosystem provide this functionality.

Yes. You can enable the ability to add HTML IDs to elements via Settings > General > General Appearance. If you add an id to an element, you can then add a link to that page that navigates to that page's URL with "#[element's id]" at the end. Also consider using the Workflow action "Scroll to" which can accomplish a similar behavior.