Making a Dropdown Menu

[JeffreyThompson2]

Once upon a time, this blog had a YouTube video by @MichaelGaigg describing how to hack a Sidebar Widget into a dropdown menu. Sadly, that video has been lost to the sands of time. Here is my attempt to recreate the method (and create a new variant) having seen the video once about six months ago.

1. Add a Sidebar Widget. In the Style Tab, switch to px and set the width and height, as you'll get better results if the Sidebar stays a consistent size. You'll want the width to be about equal to the length of text. You want to set the height as low as you can. (This is a design decision. Do you need to display all your options at once or not? How much interactive space can you give up to this menu?) Then add about 20px to your number.
2. In the Content Tab, set the Dock Side to open down (third choice from left), Size to the number you picked above, Overlay and Resizable to off, and Default State to Collapsed.
3. In the collapsible side of the Sidebar (should be labeled First, if you have set the Dock Position as shown above), add a List Widget and connect it to the data you want in your menu. (Depending on what you are doing, you might also use a Text Widget containing a set of links or a set of Button Widgets*. You may also need to use a Column Widget to help with the styling.) If you are using a List widget, you will want to go to the Action Tab > Data Action and disable data actions.
4. Go back to the Sidebar Settings Panel under the Content Tab and style the collapse button. This part is pretty subjective, so play around with the options till it looks right. I think setting the Style to the more rectangular option looks better for this application. I set the Width to the entire width of my Sidebar and the Position to Center. Using a Width about 1/5th the width of the Sidebar and Position Right is also a good choice. 
5. Finally, add a Text Widget to the always open side of the Sidebar with some text to describe why the user should press that arrow. Here's my result.

Closed     Open

Note: I've given my Text Widget a blue background, not because I think it looks good but as a reminder that you should be aware of The Sidebar Problem. All that area is not interactive.

Alternate Method

Here is another way to do this that is slightly easier to pull off. Currently, it is not possible to do in any version of ArcGIS Enterprise, but it is coming soon in Enterprise 11.3.

1. Follow steps 1-3 as above.
2. In the Sidebar Settings Panel under the Content Tab, turn the Collapse Button off.
3. In the always open side of the Sidebar, drop in a Button Widget and give it some explanation text. Also give it an arrow icon with Position Right.
4. In the Action Tab, select Add A Trigger > Button Click > Your Sidebar > Toggle Sidebar.

Here's how this looks.  

Closed    Open

If you wanted to get real fancy with it. Maybe you could put your button in a Section Widget and have your button change itself to a different button with different text and an up arrow.

*Oh and if you are going to make a set of Buttons inside your dropdown menu, maybe make them also close the Sidebar.

Alternative Method 2: The Sweet Sound of an Accordion

Since this article is suddenly popular again, let's add another method that wasn't a choice when this article was first written. And it's probably the best way to do this. I am working in ArcGIS Online. You should be able to do this back to Enterprise 11.5, but some of the finer refinements might be missing. This time we aren't using a Sidebar which means we can eliminate The Sidebar Problem™.

1. Add an Accordion Widget. In the Style Tab, set the Height to Auto. (This should fix the issue of non-interactive space from The Sidebar Problem™.)
2. In the Accordion, add a Column Widget. Alternative Alternative Method: If your choices are linked to some Data, use a List Widget instead.
3. Rename your Column Widget to be the text that describes your menu. Set the Height of the Column Widget to Auto and, in the Background Options, give it a Fill Color.
4. Add some Text or Button Widgets for your choices. (Buttons can't close an Accordion, so small downside here.) You may want to use Auto Height again here.
5. To style my Accordion, I used the fourth Quick Style choice, then I changed up the Expand and Collapse Button (so they made more sense), set the Toggle Position to End, and set the Panel Padding to 0.

And here's how the end product looks:

ClosedOpen

[CRP00]

I'm a bit late to this post, but great stuff! What would you recommend if you had various sites on a map that were each connected to a view, but also happened to have sub-sites that may need their own view? For example, Site A could have Site A1 and A2 within it.

[apgis16]

@CRP00 I have done something like this before where the header has separate pages (Menu widget in a Fixed Panel) and then in the "Public Works" page, you have a fixed panel (Views Navigation widget) with the 3 different subpages (Section widget) 

Public Works | Community Services Map

[CRP00]

@apgis16 this is really helpful, thank you. Love the layout as well and I think I'm going to explore this route. Have you experienced any loading issues with multiple pages at all? Subsequently, is each page able to have its own section widget with distinct views?

[WilliamTarpai]

@JeffreyThompson2    Really appreciated your mentioning the 'sands of time, and then posting a solution to the question you posed.   

With the 2026 User Conference and 2026 United Nations General Assembly about to happen, there are lots of work being done to ensure both are successful events.  

[HCF]

@CRP00 I have a similar setup and it works with multiple pages having their own sections. However, one thing I do have to do for my implemented custom widgets is enable "lazy loading" on the section views. If I don't then my widgets load in an incorrect order and give version mismatch errors. Hope this might help you!

[CRP00]

Thanks for your reply! I do have lazy loading enabled thankfully, but I'm not quite sure how much of a difference it makes with load times? I plan on having about 10 views per page with very few layers - how has it worked for you?  Sadly we are unable to use custom widgets.

[HCF]

@CRP00 I think the lazy loading mostly makes the initial loading time lower, but makes switching views take more time. I suppose it is a consideration of which you prefer.

I have about 8 views in the page, but some with multiple maps/layers. It works reasonably well, but performance can be lacking if I have other applications running as well. I am not sure about under-the-hood workings, but I think there might be some optimisation happening with non-loaded views which have been loaded before. I have one heavy map, and when I switch to another view it is laggy for just a moment, but becomes smooth again later.

Besides that, I believe separate pages are completely independent. Based on my limited experience, I would say your application should be doable for the framework.