In this tutorial, you'll learn how to make a navigation menu that you can add to many pages and manage from a single, central location as a master.
1. Widget and Page Setup
Create Four Pages
Open a new RP file.
In the Pages pane, do a slow double-click on Page 1 to rename it. Name it
Add three more pages to the project by clicking the Add Page icon at the top-right of the Pages pane. Name the pages
Create a Button Widget for Each Page
Double-click Home to open it on the canvas.
Drag four button widgets onto the canvas and line them up horizontally.
Tip: You can automatically align and distribute widgets by selecting them and using the Align and Distribute options at the top of the interface.
Change the text on the buttons to
Helpto match the page names.
2. Configure the Button Links
Select the Home button and click OnClick, Open Link in the Interactions pane.
In the list that appears, select Home. Then, click OK to save the action.
Repeat these steps for the other three buttons, selecting the corresponding page for each button.
Tip: You could alternatively use the reference page feature to link the navigation buttons to the pages.
3. Create a Master and Add It to the Other Pages
Select all four buttons and right-click the selection. In the context menu, select Create Master.
In the dialog that appears, name the master Navigation Header and click Continue.
The new master should now be listed in the Masters pane. Right-click it and select Add to Pages.
In the dialog that appears, check the About, Contact, and Help pages since the master is not yet on those pages.
Under Position, specify the page coordinates you would like the master to be placed at. Then, click OK.
Note: Any changes you make to the widgets inside the master will be reflected on all pages the master appears on.
Preview the page and click the navigation buttons to move between the prototype's pages.
Additional Information and Tips
If you would like your navigation menu to be fixed in place, or "stuck", so that it doesn't move when the page is scrolled, place it inside a dynamic panel. Then, pin the dynamic panel to the browser. This technique is handy for making sticky headers, footers, and sidebars.
To learn how to make a scroll-activated sticky header, check out our tutorial for that here: Scroll-Activated Sticky Header tutorial.