The menu is a commonly used UI element that facilitates navigation through the pages of an application. The menu stencil is one of the core stencils in Pidoco. Today I want to show you how easy it is to create such a menu. So here is how it goes …
Step 1: Create pages
First, create the pages that the menu stencil will link to.
Screenflow showing a menu serving as navigation element
Step 2: Add menu stencil and content
Now add the menu stencil from the Stencil Palette and place it in the desired position. Usually, you will want to include the same menu on all of the pages it links to, so consider placing it on a layer. (Here: I placed on the menu on the layer called “Header”.)
Adding the menu stencil to a prototype
When dragging the menu to your page, the text field will open directly. But to edit the content you can also double-click on the menu. The menu stencil comes with a few default entries. Each line represents a different menu entry marked by asterisks. One asterisk represents the top level of the menu, which is visible at all times (e.g. * File). Two asterisks represent the first level of sub-entries, which are only visible when the user hovers her mouse over the menu in the simulation (e.g. ** New file). Three asterisks respresent sub-sub-entries, and so on.
You can add more entries to any level or replace existing ones using a new line and the right number of asterisks for each. Entries will appear in the order you specify, but at each given level, only the corresponding entries with the right number of asterisks will be visible in the simulation.
Hint: If you add entries to the top level (1 asterisk), you may have to resize the menu stencil to see all of them on the screen.
Step 3: Insert links
To link a menu entry to a page in your prototype select the entire entry with your mouse and choose the desired target page from the dropdown menu above. The dropdown includes all pages you have created so far. Selecting a target page will insert brackets ([ ]) around the menu entry (also called the anchor text) to signal that it is now linked up and add the ID of the target page after the opening bracket (e.g. page0001). Make sure not to introduce spaces between the target page ID and the bracket, erase page IDs or change the position of brackets and spaces when you edit the menu because this may break the links.
Linking up individual entries of the menu via the page dropdown
Hint: You can also link to external URLs. To do so replace the target page ID with the desired URL, leaving the brackets intact. Be careful not to leave a space after the opening bracket.
That’s it. You have successfully created your first linked menu!
Do you need help with the menu? Just send us a message via support@pidoco.com or Facebook, Twitter or Google+.
Happy Prototyping!