Highlighted

How to make horizontal navigation scrollable

New Here ,
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

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

Views

7.1K

Likes

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

How to make horizontal navigation scrollable

New Here ,
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

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

Views

7.1K

Likes

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
Sep 26, 2018 0
Adobe Employee ,
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

Likes

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
Reply
Loading...
Oct 01, 2018 0
Adobe Employee ,
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

Likes

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
Reply
Loading...
Jun 21, 2019 1
Community Beginner ,
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

 

 

Likes

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
Reply
Loading...
May 11, 2020 1
Adobe Employee ,
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

Likes

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
Reply
Loading...
May 13, 2020 0
Adobe Employee ,
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

Likes

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
Reply
Loading...
Jun 16, 2020 1
Community Beginner ,
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?

Likes

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
Reply
Loading...
Jun 16, 2020 0
Participant ,
Jun 16, 2020

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jun 16, 2020 0
Adobe Employee ,
Jun 16, 2020

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jun 16, 2020 0
Community Beginner ,
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

Using Scroll Groups in Adobe XD, you can define areas of content that can be scrolled through, either horizontally, vertically, or in all directions. This is...

Likes

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
Reply
Loading...
Jun 16, 2020 0
Participant ,
Jun 16, 2020

Copy link to clipboard

Copied

@Preran Have you an idea when?

Likes

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
Reply
Loading...
Jun 16, 2020 0
Participant ,
Jun 16, 2020

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jun 16, 2020 0
Community Beginner ,
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

Now you can Define areas within an artboard that scroll independently from the rest of the artboard. See how it works: http://adobe.ly/xdjunerelease2020 #Ado...

Likes

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
Reply
Loading...
Jun 16, 2020 0
Participant ,
Jun 17, 2020

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Jun 17, 2020 0
New Here ,
Aug 31, 2020

Copy link to clipboard

Copied

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!

Likes

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
Reply
Loading...
Aug 31, 2020 0