• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How to make horizontal navigation scrollable

Community Beginner ,
Sep 26, 2018 Sep 26, 2018

Copy link to clipboard

Copied

Hi.

In the included example I have a horizontal navigation below the header.

How to make it scrollable? When I create a prototype it is not scrollable from left to right!

Thank you

Screen Shot 2018-09-27 at 12.34.50.jpg

Views

8.7K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , Jun 16, 2020 Jun 16, 2020

With Adobe XD 30.0, you can easily prototype Horizontal, Vertical, and Multi-dimensional scrolls. For more information, see https://helpx.adobe.com/xd/help/create-scroll-groups.html

Votes

Translate

Translate
Adobe Employee ,
Oct 01, 2018 Oct 01, 2018

Copy link to clipboard

Copied

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-... and upvote this discussion and share your comments as well.

Please update this discussion in case you need further assistance.

Thanks,

Atul_Saini

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 21, 2019 Jun 21, 2019

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 11, 2020 May 11, 2020

Copy link to clipboard

Copied

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

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 13, 2020 May 13, 2020

Copy link to clipboard

Copied

Hi Rick,

 

Thanks, for sharing the steps on how to do that, It will surely help other community members.

 

Regards

Rishabh

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 16, 2020 Jun 16, 2020

Copy link to clipboard

Copied

With Adobe XD 30.0, you can easily prototype Horizontal, Vertical, and Multi-dimensional scrolls. For more information, see https://helpx.adobe.com/xd/help/create-scroll-groups.html

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 16, 2020 Jun 16, 2020

Copy link to clipboard

Copied

Horizontal scroll group issues in Adobe XD

 

Unfortunately, I'm having trouble with the new horizontal scroll group feature. After grouping some objects as a horizontal scroll group, I click on the page and trigger the preview, nothing happens. It doesn't move, it doesn't roll, nothing.
I expanded the scroll group marker to the edge of the screen, but still, nothing happened.
What could be happening?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 16, 2020 Jun 16, 2020

Copy link to clipboard

Copied

Apparently, doesn't work with mouse...
Just trackpad and tactil. I hope it's a joke.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jun 16, 2020 Jun 16, 2020

Copy link to clipboard

Copied

The limitation will be addressed very soon in a future update. Stay tuned.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 16, 2020 Jun 16, 2020

Copy link to clipboard

Copied

I was able to view Adobe's step-by-step demonstrating this new feature, and according to Howard Pinsky it is possible to apply this task (vertical, horizontal and both), without any problem and limitation.

 

I can't understand why Adobe takes so many years to implement one of the most requested features on the Forum.
https://www.youtube.com/watch?v=UV4YKibuCKg&feature=youtu.be

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 16, 2020 Jun 16, 2020

Copy link to clipboard

Copied

It's true how can he maker this with his mouse?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 16, 2020 Jun 16, 2020

Copy link to clipboard

Copied

In the video, the instructor demonstrates that it can be through the mouse (scroll and drag).
See another example:
https://www.youtube.com/watch?v=7FuL2BosGr0

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 17, 2020 Jun 17, 2020

Copy link to clipboard

Copied

Ok so what's the problem? Just Windows Problem?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 16, 2020 Jun 16, 2020

Copy link to clipboard

Copied

@Preran Have you an idea when?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Aug 31, 2020 Aug 31, 2020

Copy link to clipboard

Copied

LATEST

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines