nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Create a menu/links to screen groups

ChrisRoberts2

I am playing with experience builder to create a scrollable page something similar to a storymap that contains different screen groups eg cascade and flyer. Is it possible to create quick links or a menu at the top of the scrollable page or in the header to the different screens? I have tried using the menu widget but there doesnt seen a way to link it to a screen. I have also tried the Views Navigation and Button Widget but again it doesnt seem possible to link it to a screen.

Cheers Chris

Vind meer berichten getagd met

Accepted answers

TonghuiMing

Hi @ChrisRoberts2

Currently we do not support anchor link to screen/screen group, however, you can work around it by using a empty block on top of your desired screen group, and then link to block from Button/Image/...

All comments

rachelm

Have I missed something on how to add a Screen Group? I do not see it in the Canvas as an option.

SteveLowman1

Hi @TonghuiMing

"... empty block ..."

Okay, a block with gap and padding set to zero, and height set to 0.01 px (ends up with bigger gap than 0.01 px, but that's the lowest value that sticks)

The block cannot be "empty" or it will disappear. It must contain a widget, so I used a Placeholder widget with height set to zero.

(Step 1, drag a new Placeholder widget from the Add Widget panel to the bottom of your page, and it is added there inside its own new block).

A series of screen groups, each containing only one screen, results in the same functionality as one screen group containing a series of screens. So, it is indeed possible to position a 'block-with-placeholder' immediately above each screen group containing only one screen.

Then, a list of contents with each item linked to an appropriate block will actually work very well.

The only compromise is that you get a small gap above the top screen and a small gap between each screen. This is not a disaster - your page still can look great and function well.

So, okay good fellow, you get a Kudo from me, too!

Another possible workaround if you don't need a dedicated Page Contents list in a text widget is to create a separate storymap app and then embed it into your Experience Builder page using an embed widget within an appropriate layout widget. Then you have the Heading anchor links with their # endings that work fine within the embed widget, but if you try to put same anchor links into buttons or text widget links outside the embed widget, then of course they link to the separate storymap app, so you gain some navigability within the embed widget but you cannot make a separate linkable page contents list text widget.

ChrisRoberts2

Thanks @TonghuiMing

Yep that's the path I ended going down. Seems like a good workaround.

Cheers

TonghuiMing

Hi @ChrisRoberts2

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.