How to set re-usable navigation links in prototype?

[user82573258]

I'm going through the XD prototyping tutorials and am wondering if I can set the hotspots in this navigation without having to apply them to every artboard individually? As the latter could be very time consuming if I have a lot of different pages

E.g. could I make a component out of the nav and link each button to a certain artboard, and then place that component into my artboards?

It seems I can do something similar with overlays, except that involves having them animate in... whereas I'd just like it so that the nav was static.

<Title renamed by moderator>

[AkinGn · Accepted solution]

Hi, I tried and actually this is a recommended method while designing multiple pages, and of course for a consistent design/system. Steps should be: 1. Create the navigation component as you said, you can totally do that on a seperate artboard. 2. Go to prototype mode and create the connections to the relevant artboards/pages from your nav component. 3. Copy the nav component to the all artboards/pages. I created a simple example you can see the prototype here: https://xd.adobe.com/view/44080237-95c2-4b12-87ff-4a020f0262de-115b/
and the file here: https://www.dropbox.com/s/g0s2fk3e850j588/nav-component-for-multiple-artboards.xd?dl=0
Hope this helps!

[mttplbkp]

Thanks! but if you re-wire some of the nav links, does that update on all instances of the component?

I'm under the impression that components don't store the nav / wires themselves (not sure if Im using the right terms here) and that they need to be copied & pasted

[AkinGn]

Actually it looks like it has been updated in the all instances of the nav component, as long as the wire change has been done in the main component, it acts like any other component parameter. In my example, I created a "B2" artboard by copying the B artboard and wired the B link to "B2", and did the wiring only in the main component, and now regardless of which artboard I'm in, whenever I click B, it directs me to B2 artboard: https://xd.adobe.com/view/44080237-95c2-4b12-87ff-4a020f0262de-115b/