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, customize the “Home” text to appear selected. In Panel 2, customize the “Electronics” text to appear selected, and so on.
- Go to Panel 1 of the Dynamic Panel and select the “Home” text. 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 as the panel to be set as active.
- Repeat this step for the remaining text elements within Panel 1, changing the active panel each time (e.g. the “Electronics” text should go to Panel 2, the “Audio” text to Panel 3 and the “Headphones” text to Panel 4.
- Now, copy and paste Panel 1’s events to the corresponding text elements 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.