Navigation in Shaper

​

Accessing the Sitemap

The sitemap in Shaper acts as a visual representation of all pages and screens in your project. It helps manage navigation flows and structure user journeys efficiently.

• Open the Sitemap Panel from the right sidebar.
• View all existing pages, including main pages, subpages, and nested routes.
• Click on any page to jump directly to it in the design editor.
• Drag and drop to rearrange page hierarchy for better organization.

​

Creating & Managing Routes

Each page in your design corresponds to a route that can be managed within the sitemap.

​

1. Adding a New Page (Route)

• Click “Add New Page” in the sitemap panel.
• Pre-defined page name and URL slug (e.g., /about-us, /contact) is generated.
• Choose if it should be a main page or a subpage (nested route).
• The new page appears instantly in the design editor.

​

2. Navigating Between Pages

• Select a page from the sitemap, and it will load in the editor.
• Select a page fromtop of the artboard , and it will load in the editor.
• Select a page fromthe left panel dropdown , and it will load in the editor.

​

3. Dynamic Routing & AI-Generated Navigation

Shaper’s AI can automatically generate navigation flows based on project structure:

• Suggested Navigation Menus: AI recommends menus based on your pages.
• Dynamic Content-Based Routing: Automatically adapts navigation based on user selections or states.

​

4. Previewing Navigation & Routes

To test page navigation within your project:

• Click “Play mode” to see how routes behave in a live environment.
• Check the URL bar in preview mode to ensure routing works correctly.