App Navigation

App navigation is a key part of creating a great user experience for your app. It allows users to easily move between different categories of grouped content. Focussing their attention on the content that matters most to them.

This process is handled in ditto via the 'Navigate Button' block. This block allows you to link to other pages in your app or external URLs. However, you need to create the pages you want to link to first.

Adding a new page

To add a new page, click the '+' button on the 'App pages' tab to the left of the editor. Give your page a human readable name and click 'Create'.

Your new page will be added to the list of pages in the editor. Click on the page to start adding blocks.

Linking to a new page

Once you've added content to your new page, go back to the homepage and add a 'Navigate Button' block. Give your button a title and select the page you just created from the dropdown for it to link to.

Try rebuilding your app by hitting the play button in the top right corner to see your new page and app navigation in action.

When you navigate to a page in a ditto app, the URL in the browser will change to reflect the new page. This allows users to bookmark or share specific pages in your app. A menu bar at the top of the page will also show the current page and allow users to navigate back through the pages they have visited.

Handling page history

Page history is saved by default when your users navigate between pages in your app. This means that if a user navigates back to a previous page, any interactions they made with that page and any dynamic content generated on that page will be preserved. You can choose to clear this page history by selecting the 'Clear history' option in the 'Navigate Button' block settings. This will page will begin rendering the page blocks from scratch in order from top to bottom as described in the Page Logic section.