Justinmind

SUPPORT

Learn how to prototype web and mobile apps

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.

Breadcrumb navigation in your interactive wireframes

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.

Breadcrumb navigation in your interactive wireframes: dynamic panels

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.

Breadcrumb navigation in interactive wireframes: hotspots

Add interactions

For each Hotspot widget, we’ll specify an ‘On click’ + ‘Set Active Panel’ event, specifying the panel you want to display.

Breadcrumb navigation in your interactive wireframes: events

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!

Next tutorial > Design Custom Mega menus