How to simulate breadcrumb navigation in your interactive wireframes
Simulate breadcrumb navigation in your interactive wireframes with the help of this tutorial.
With Breadcrumb navigation, you can keep track of your current location within a website or app, link back to the parent pages of the current selection, or to the previous pages navigated by the user to get to their current location.
The example in this tutorial uses a four-level navigational path: Home > Support > Tutorials > Beginners
You can download the example below here.
Follow the steps below to simulate breadcrumb navigation in your interactive wireframes:
Create dynamic panels
1) Create a new prototype.
2) Add a Dynamic Panel widget to the screen, create 3 panels and rename them as in the example below.
3) Double-click on the first sub-panel to edit its contents and drag images and text widgets into it, reproducing the example above. Each panel will have the correspondent menu item in a different color.
4) Add Hotspot widgets on each menu item, as shown in the image below.
For each Hotspot widget, we’ll specify an ‘On click’ + ‘Set Active Panel’ event, specifying the panel you want to display.
Remember that Justinmind allows you to copy and paste events. You can copy and paste the same event to each Hotspot, just remember to change the active panel each time.
Start breadcrumb navigation
Now all you need to do is simulate and enjoy!