Navigation Menu

[andrecasal]

I'm trying to build a Navigation Menu.

According to the WAI-ARIA Authoring Practices 1.2 (please correct me if I'm wrong):

1. Navigation menu should follow the 'Roving TabIndex' pattern
2. Opening Menus/Submenus:
   a. Menus should typically open on Enter or Space key press.
   b. Submenus should open when focused using arrow keys (e.g., Arrow Down for horizontal menus, Arrow Right for vertical menus), or on Enter or Space key press when the menu item is focused.
3. Closing Menus/Submenus:
   a. Menus and submenus should close on pressing Escape (Esc) key.
   b. Submenus should also close when moving focus away from the submenu, such as by pressing arrow keys to move to another menu item (like a parent) or clicking outside the submenu.

I tried implementing this with:

<ListBox aria-label="Main Navigation" orientation="horizontal" className="flex gap-4">
	<ListBoxItem>
		<Link to="/home" variant="button" buttonVariant='secondary' size="sm">Home</Link>
	</ListBoxItem>
	<ListBoxItem>
		<MenuTrigger>
			<Button aria-label="Menu" variant="secondary" size="sm">Store</Button>
			<Popover>
				<Menu>
					<MenuItem><Link to="/store/product1">Product 1</Link></MenuItem>
					<MenuItem><Link to="/store/product2">Product 2</Link></MenuItem>
					<MenuItem><Link to="/store/product3">Product 3</Link></MenuItem>
				</Menu>
			</Popover>
		</MenuTrigger>
	</ListBoxItem>
	<ListBoxItem>
		<Link to="/about" variant="button" buttonVariant='secondary' size="sm">About</Link>
	</ListBoxItem>
	<ListBoxItem>
		<Link to="/contact" variant="button" buttonVariant='secondary' size="sm">Contact</Link>
	</ListBoxItem>
</ListBox>

Status:

1. ✅ We can navigate the links using the arrow keys and the component will remember the last selected item
   2.a. ❌ MenuTrigger isn't triggered on Space, Enter, or Arrow Down. Pressing Space scrolls the page. Pressing Enter does nothing.
   2.b. ❔ I'll try updating the example with submenus later. I'm trying to figure out the menu first.
   3.a. ✅ The menu correctly closes on Esc
   3.b. ❔ I'll try updating the example with submenus later. I'm trying to figure out the menu first.

I couldn't find any reference to or examples of a Navigation Menu on the docs (or Google). Am I using the right components? What am I missing to make the Menuwork correctly?

[snowystinger]

I think this is a duplicate of #3817
Also #5624

[andrecasal]

Hey @snowystinger 👋 I saw those but wasn't sure they were exactly what I was looking for, thanks for bringing that together.

[andrecasal]

I would like to see an interface along these lines:

<NavigationMenuTrigger>
	<Button>Menu</Button>
	<NavigationMenu>
		<Link href="/">Home</Link>
		<Link href="/about">About</Link>
		<SubmenuTrigger>
			<Button>Store</Button>
			<Submenu>
				<Link href="/store/promo">Promo</Link>
				<SubmenuTrigger>
					<Button>Men</Button>
					<Submenu>
						<Link href="/store/men/shoes">Shoes</Link>
						<Link href="/store/men/pants">Pants</Link>
						<Link href="/store/men/jackets">Jackets</Link>
					</Submenu>
				</SubmenuTrigger>
				<SubmenuTrigger>
					<Button>Women</Button>
					<Submenu>
						<Link href="/store/women/high-heels">High-heels</Link>
						<Link href="/store/women/skirts">Skirts</Link>
						<Link href="/store/women/dresses">Dresses</Link>
					</Submenu>
				</SubmenuTrigger>
			</Submenu>
		</SubmenuTrigger>
		<Link href="/log-in">Log in</Link>
		<Link href="/create-account">Create account</Link>
	</NavigationMenu>
</NavigationMenuTrigger>

The trick here is that <NavigationMenu> might always show on desktop, while it would have to be triggered on mobile using the <Button>Menu</Button>.

Ideally we would have a way to trigger this "desktop or mobile" decision automatically (based on parent container width or a fixed breakpoint).