design-system-react
design-system-react copied to clipboard
Menubar Dropdown keyboard navigation
Apologies if this is written down in the docs, I did not manage to find it!
Currently, if I add something like the code below, the individual dropdowns are unaware of each other through keyboard navigation. If I am focused on an item within the first Dropdown menu and I hit the left/right arrow key, focus should be moved to the second dropdown. Does SLDS provide a wrapper component that handles this sort of keyboard navigation?
<nav>
<SLDSDropdown><Trigger /></SLDSDropdown>
<SLDSDropdown><Trigger /></SLDSDropdown>
</nav>
Here is an example of what I am looking for. Using a keyboard, I can focus on the "About" menu. Using the down arrow opens the menu and focuses the "Overview" item. If I then hit the right arrow key, the next dropdown in the menubar is focused.
Thanks for opening your first issue! :wave: If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.
There's no pattern for a menubar
present in https://www.lightningdesignsystem.com/
Global Navigation is the closest, but I believe it uses tabbing. That said, I could see a usage for a Menubar wrapping component that takes Dropdowns.
This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.