[NavigationMenu] Expose position of active <NavigationMenu.Item />

Feature request

Can we expose the position of the active <NavigationMenu.Item />, and maybe it’s bounding box so we can position the <NavigationMenu.Viewport /> directly below the active item?

It could be exposed through CSS custom properties as --radix-navigation-menu-indicator-position, which should work for both horizontal and vertical menu’s.

Even better would be a hook or render prop so we can wait until the indicator knows its position before we show the <NavigationMenu.Viewport />

Overview

The NavigationMenu works really well if your foldout content is wider than your list of navigation menu items.

However, if you add (much) more NavigationMenu.Item components the layout will start to look awkward.

Example on codesandbox: https://02xv7f.csb.app/

Who does this impact? Who is this for?

Everyone who wants to use NavigationMenu with a wide list of items.

[andy-hook]

Would you mind explaining why you set the list ref with setState rather than useRef in your example?

@elisehein It ensures the ref callbacks are updated with the list node when it’s available, there are likely more efficient ways to build this but I wanted to provide a quick example to show that this is possible in user code with some additional measurement.

Another approach might be to get and sync the currently active trigger via effect and update the positioning accordingly:

https://codesandbox.io/s/navigation-menu-track-position-effect-sync-q20tjd?file=/src/App.js

It depends on your design and the types of animation effects you’re trying to achieve, this example is dependent on central alignment so a different approach or more generic implementation might be necessary depending on the need.

It also doesn’t account for responsive changes in element dimensions, for that you’d need to observe for element resize etc.

Hope this helps!

[andy-hook]

Hey @janhoogeveen , I agree this is a bit of a pain point at the moment, providing some way to track the content against the active trigger would be very useful for folks 👍

I realize another solution is to wrap <NavigationMenu.Viewport /> in <NavigationMenu.Indicator /> but I’m not sure if that’s frowned upon?

As you noted, the indicator wasn’t designed for this purpose. In addition to the visual glitch there is also an accessibility problem as aria-hidden is set on the indicator part by default so it would effectively hide all menu content from screen readers.

Thanks for raising, I’m going to mark it for improvement. In the meantime it is possible to implement your own tracking logic fairly easily depending on your design requirements, here is a (really) rough example of how it could work with a centrally aligned navigation:

https://codesandbox.io/s/navigation-menu-track-position-fhh9so