Cascading menus

[joshua-vaughn]

Summary

Carbon needs a Cascading menu component. Currently there are Dropdown, Overflow menu, and Select components, but none of these support cascading menus.

Justification

Cascading menus are a common design pattern in complex enterprise applications.

The Cloud Pak for Data global search function will use a cascading menu design to allow users to scope their searches by a specific catalog, project, or governance artifact type.

We also forsee action menus on table rows that could contain a long list of actions which would require categorization.

Desired UX and success metrics

Users are able to select an item from a cascading menu.

"Must have" functionality

A cascading menu item is not selectable itself, but opens a sub-menu from which one could select another item. Cascading menu items have a visual indicator like a right arrow icon.

In some cases like the Search scoping menu, we may need another visual indicator to suggest which menu item is currently selected. In the case that a sub-menu item is selected, the indicator would appear on both the parent menu item and the sub-menu item.

Cascading menus could be nested several levels deep.

Specific timeline issues / requests

CPD is launching our new search design with a cascading menu in the October release.

Available extra resources

CPD development may be able to contribue our implementation of the cascading menu back to Carbon.

[asudoh]

CC @carbon-design-system/design Would there be an interest in this from designers' perspective? I recall header nav used to have something similar.

[shixiedesign]

Hi @joshua-vaughn for "Justification", could you please provide specific product screenshots and screen flows to show the job-to-be-done that requires this component? If they are IBM confidential you can upload to box and share link. Thanks!

[joshua-vaughn]

Here is our search scoping filter spec for Cloud Pak for Data, this is the best I have right now.

Global Search-Scoping filter-Documentation.pdf

[shixiedesign]

Thanks! So the reason we don't support cascading menus right now is because its usability is notoriously bad. It's very easily to hover outside and seeing the entire thing close right before you click on your desired item; hard to go back a level and open a new submenu, etc, causing a lot of frustration in users.

The PDF you provided doesn't provide a lot of context beyond what goes into the menus. What does the rest of the page contain? If seeing all the submenu options is important, have you explored other solutions like a left nav, or a persistent div somewhere on page? A more common solution for Catalogue is a grid or list view on page, not cascading menus, precisely because of the usability issues above.

Obviously I don't have all the context and there is a place for cascading menus in UI. just the correct implementation and usage is very hard. If this is the solution you decide to go with, we look forward to your contribution!

[chrisconnors-ibm]

@joshua-vaughn : I would agree this is a distinct component from menu as you describe. While getting the hover and hit regions correct to get the behaviors users expect (avoid this for example)

https://okc.media/_eventPics/bootstrap-bug.gif

(Bruce Tognazzini of Nielsen Norman Group (OG Apple) and others have a lot of research on Hierarchical Menus and how to make them behave as people expect)

…as a component this would be a fine community contribution regardless of whether or not it ever wound up in our main branch. Can your team design and build this?

[joshua-vaughn]

@shixiedesign, this is the scoping menu for the global search box shared by Watson Knowledge Catalog, Cloud Pak for Data, and several other IBM products. It will appear in the global header on every page of the application. Our use case is simple: Users want to restrict the scope of their search to a specific catalog, project, or governance artifact type before running their search. We may add other scoping categories in the future. But this is only one of many use cases for a cascading menu component. They are useful anytime one has more then 10 items in a menu which can be categorized in a logical fashion.

[joshua-vaughn]

@chrisconnors-ibm, I'm not sure if this is a separate component from menu or just a feature of that component. I agree there are a lot of subtle behaviors we need to get right to make cascading/hierarchical menus as usable as possible! I will investigate if our front-end developers will be able to contribute this to Carbon, but as of now Cloud Pak for Data isn't using Carbon 10 yet. For the October release our developers will be manually adding the search scoping menu to our current global header implementation which is not Carbon-based. We are just now starting to plan our migration to Carbon 10, and the lack of common features like cascading menus is a concern.

[joshua-vaughn]

Comments on cascading menus from our front-end developer Dejan:

Note that they are not without downsides - they can easily become unwieldy and honestly I would be surprised to see them outside of the top header navigation. They can also be difficult to position depending on where the top menu is - you will need to control orientation and even with that, you can easily run out of room.

[chrisconnors-ibm]

@joshua-vaughn the way our system will scale to include components like hierarchical-menu is through the parallelized efforts of teams who have a specific need creating designs and components that cover their specific use cases, and then sharing them with the broader community. We can't extend our coverage alone. We're counting on the community.

[tw15egan]

Just for some dev reference, I came across this article a few years ago when Cloud was considering building an Amazon-like menu. To properly build a component like this, you'll need to do some sort of calculations based on which direction the mouse is moving, to avoid the Bootstrap bug

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[joshua-vaughn]

Still needed, stale bot!

Some progress to report: The cascading search scoping menu has been implemented in the shared global header component used for WKC, CPD, and other products. This implementation is not in Carbon 10, but as our teams migrate to Carbon 10 we can look at reimplementing the cascading menu as a component and contributing it back to Carbon.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[tay1orjones]

While this isn't supported in UIShell (which does seem to be what the screenshots here are for), there is general support for nesting menus via the Menu primitives