How to make horizontal navigation scrollable

But now there's a drawback: once you share something like this, or a layout more complicated (this is my case), you can't copy the text that are hidden from the main screen. The Adobe XD inspector doesn't allow reviewers to copy the text from elements that are supposed to be scrollable.

My client just complained about the lack of this feature and I answered I wasn't aware of this. But this little feature would surely help us a lot!

I was able to achieve this result by using 2 artboards, the drag trigger, and auto-animate in Adobe Xd v28.

See the demo: https://xd.adobe.com/view/43adb5d0-5103-45cf-643f-98f1b1dbb412-359c/?fullscreen

Setup

The key uses a feature of Adobe Xd drag triggers called "auto-animate". It works a bit like keyframe animation where you have the starting position of the menu on artboard 1, and a duplicate of the menu dragged all the way to the left on artboard 2.

1. Make an artboard with a group of menu links as separate text objects in a line. Make so many menu links that they overflow the right side of the artboard.

2. Duplicate the artboard, and move the group of menu links left, until the last one appears in the middle of the screen.

3. In prototype view, select the menu group on artboard 1 and drag a new transtion to artboard 2. Set the trigger to drag, and the action type to "auto-animate"

4. Preview. You should now have a menu bar along the top for tabbed navigation on mobile.

Additionally, I found you can add a unique link and transition to each of your menu items:

5. Create a new empty artboard for your first page of content. Leave it empty of give it a "1" so you can recognize it when you preview.

5. Doubleclick your menu to access the group of text links it contains. Add a tap trigger from the first menu text to this new page it will link to.

6. Change the action type to transition and animation to slide left

8. Preview: clicking your first menu item should display your empty 1 page.

Limitations:

1. The overall width of the menu is important. Extra wide menus may not allow the user to select the middle items as it scrolls by too fast. POssible workaround is to create interim artboards to stop in the middle, but I haven't explored this.

2. For sublinks, after you add them to artboard 1 they will need to be added to artboard 2 as well. A bit of duplication that could perhaps be removed by making the menu a component - not sure.

For more info consult this intro to the drag trigger from Adobe: https://letsxd.com/videos/drag-trigger

Hope this helps!

Rick

In the time that the feature makes it to Adobe XD, see the workaround solution in this forum post Make it share it : Horizontal Scrolling in Adobe XD

Hi Nikola,

Thanks for using Adobe XD and sharing your feedback about this feature. I would request you to check this feature request: -https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/13616781-carousel-side-scroll and upvote this discussion and share your comments as well.

Please update this discussion in case you need further assistance.

Thanks,

Atul_Saini