Nimble Menu Component - overflow issue when having high number of menu items

[munteanumarco]

🐛 Bug Report

When the nimble-menu contains a long list of items, the menu expands beyond its container and overflows, covering other UI components.

🤔 Expected Behavior

Have a mechanism in place to correctly handle a long list of menu-items.

😯 Current Behavior

Currently, there is no mechanism in place to handle this overflow, causing the menu to extend beyond the viewable area and potentially cover other UI elements.

💁 Possible Solution

A potential solution attempted was to set a maximum height for the nimble-menu and add a scrollbar. However, this workaround quickly proved problematic, as it broke other Nimble functionalities, such as nested submenus. Additionally, implementing this fix outside of the Nimble component itself isn't ideal, as it could lead to duplicated code and other maintenance challenges.

🔦 Context

Discovered this issue while using a nimble-menu-button component that contains the nimble-menu within it. This menu holds several items, which are essentially navigation destinations. As the list of items grows longer, the menu begins to overflow beyond its container. Here's a simplified version of the HTML code:

<nimble-menu-button>
    <nimble-icon-book-magnifying-glass slot="start"/>
    <nimble-menu slot="menu">
        <nimble-anchor-menu-item *ngFor="let destination of destinations">
            {{destination.name}}
        </nimble-anchor-menu-item>
    </nimble-menu>
</nimble-menu-button>

[jattasNI]

@fredvisser is going to brainstorm alternative ideas to this pattern.

Linking it with a duplicate issue: #765

[fredvisser]

After discussing with the IxDs (including Nakano), the 'fix' for this issue is for us to update the usage docs to explain how the menu doesn't scroll, and that you shouldn't put a high number of menu items in it (it's a UX anti-pattern).

That said, for this use case there are a few options (in priority order):

1. Limit the number of pages (menu items) that can be linked from each dashboard. In the tool that configures the dashboard links, add a reasonable upper limit.
2. Allow users to specify a link hierarchy (and also have an upper limit of menu items)
3. Work with John to consider a mega menu layout instead of the default list of menu items.
4. Work with John to consider a slide-in drawer on the right side, that includes a scrollable tree control of page links.