Mobile only: add drilldown menu to bottom drawer

[db-ot]

Initial Checklist

• I understand this is a user story and questions should be posted in the Community Discussions
• I searched issues and couldn’t find anything (or linked relevant results below)

User Story

As a mobile user, I want to access a hierarchical (drilldown) menu via the bottom drawer so that I can easily navigate through nested content without leaving the current screen or being overwhelmed by too much information.

User Value

• In mobile drilldown navigation, showing only one level at a time helps reduce cognitive load.
• Always provide clear context of the user's position, such as a breadcrumb or "Back" button.

Acceptance Criteria

• Drilldown Menu eg. "open with ..."
  • click on a sub-menu shows only the submenu
  • click on the back-arrow navigates back to the previous menu
  • show current menu title on top

Drilldown menu

please also check here some UI Experiences & Examples:
https://m2.material.io/components/navigation-drawer#bottom-drawer

[kulmann]

should swiping on mobile devices also go back to the parent menu? Or is it conflicting with native browser features, like going back in the browser history?

[db-ot]

I guess users are expecting the following behavior: Swiping on the drilldown from left to right → going back to the parent menu.
Swiping from top to bottom close. We are adapting the behavior of native app navigation here. It could be confusing if we start using browser history interaction.

We could also disallow swiping, so users can only click to go back or use Esc.

[kulmann]

There is https://vueuse.org/core/useSwipe/ so I hope it's not that hard to implement. I'd love to have swipe support.

[AlexAndBear]

Technical detail:

• Open sub menu closes parent drop
• back button programatticaly opens parent drop
• clicking sub menu drawer item (button) always closes drawer