Prototyping dynamic breadcrumb navigation
With Justinmind, you can simulate breadcrumb navigation in your prototypes. Breadcrumb navigation will help users keep track of their whereabouts on your site or app, return to parent pages of the current selection, or return to previously-navigated pages.
In our example, we’ve created breadcrumbs with four levels: Home > Support > Tutorials > Beginners.
Follow the steps below to simulate breadcrumb navigation in your prototype:
- In a new web prototype, drag four Text widgets and a Triangle to the canvas.
- Rotate the Triangle 90° clockwise so that it is right-facing and duplicate it (right click, “Duplicate”) twice.
- In each of the Text elements, write one of the following: “Home”, “Electronics”, “Audio” and “Headphones”.
- Position and resize these elements on the canvas to match our example.
- Now select all of the elements on the canvas, right click within the selection and select “Group in Dynamic Panel” from the menu.
- Go to the Outline palette, right click on Panel 1 from within the Dynamic Panel and select “Duplicate”. Duplicate Panel 1 three times. You should now have four panels within your Dynamic Panel.
- Change the appearance of the selected text box in each panel. In Panel 1, the “Home” text box should be customize to appear selected. In Panel 2, the “Electronics” text box should appear selected, and so on.
- Go to Panel 1 of the Dynamic Panel and select the “Home” text box. Then, go to the Events palette and click “Add Event”.
- Add an “On Click” + “Set Active Panel” event, selecting Panel 1 from the Outline palette. Click “OK”.
- Repeat this step for the remaining text boxes within Panel 1, changing the active panel each time (e.g. the “Electronics” text box should go to Panel 2, the “Audio” text box to Panel 3 and the “Headphones” text box to Panel.
- Now, copy and paste Panel 1’s events to the corresponding text boxes in Panels 2, 3 and 4.
- Click “Simulate” to view and interact with your prototype. Click the text in each breadcrumb to navigate to that breadcrumb.
You can download our example here.