Horizontal menubar keyboard navigation?

[lewisl9029]

Hi team! I'm working on a responsive navbar that lays out horizontally on desktop and vertically on mobile using @react-aria/menu.

So far so good, but I'm wondering if there's a way to configure the keyboard navigation to navigate with left/right keys when the menu is in its desktop orientation, as opposed to (or in addition to) up/down keys. Or maybe there's a better primitive for building responsive navbars that I should be using instead?

I tried to look for references around orientation on the docs and in the repo but have come up empty so far. Any ideas would be appreciated!

[snowystinger]

Is it a menu? or would TabList make more sense? Or maybe the ActionGroup?

Otherwise, if it truly is a menu/nav, you can probably use the keyboardDelegate to implement it. The types for it are in the props args of useMenu here https://react-spectrum.adobe.com/react-aria/useMenu.html

[LFDanLu]

A rough example of what it may look like to implement a keyboardDelegate of your own: https://codesandbox.io/s/unruffled-lichterman-rgpnwu?file=/src/App.js
Note that the above example is missing things like a collator (aka for typeselect) and locale/direction being provided (aka for RTL language handling),

react-spectrum/packages/@react-aria/selection/src/useSelectableList.ts

Line 109 in a936263

let collator = useCollator({usage: 'search', sensitivity: 'base'});

and https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/tabs/src/TabsKeyboardDelegate.ts#L24-L49 should be helpful for how to handle each of those respectively.

https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/selection/src/ListKeyboardDelegate.ts is what the MenuKeyboardDelegate is extending, you may need to overwrite some of the functions there depending on your use case. It may even be the case that the TabsKeyboardDelegate is more useful here and that you would only cherry pick the typeselect stuff from the ListKeyboardDelegate

[lewisl9029]

Wow, this looks perfect! Thank you both so much for the super quick response!