How do I get a bottom border on the selected NavigationMenuItem?

[nareshbhatia]

I am trying to get a bottom border on the selected NavigationMenuItem. Something like this:

I thought that the NavigationMenuIndicator component might do this. However, I couldn't find any examples. I added it to my navigation menu, but it shows nothing.

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>...</NavigationMenuItem>
    <NavigationMenuItem>...</NavigationMenuItem>
    <NavigationMenuItem>...</NavigationMenuItem>
    <NavigationMenuIndicator />
  </NavigationMenuList>
</NavigationMenu>

What is the purpose of NavigationMenuIndicator and can I use it to show a bottom border on the selected item?

[nareshbhatia]

Hi @shadcn, can you please help me understand what is NavigationMenuIndicator? The examples don't cover it (even on the radix-ui side). I tried adding it to your example, but nothing happens.

[pablotanner]

I assume it's for the indicator arrow in this image

[pablotanner]

I got the bottom border to work by adding the border to the NavigationMenuTriggers and hiding/showing their color depending on whether the NavigationMenuItem is open or not.
Here's the code, let me know if it works for you!

        <NavigationMenu>
                <NavigationMenuList>
                    <NavigationMenuItem>
                        <NavigationMenuTrigger
                            className="border-b-2 border-b-transparent rounded-b-none data-[state='open']:border-black"
                        >
                            First
                        </NavigationMenuTrigger>
                        <NavigationMenuContent>
                            <div className="w-96 h-32 bg-white">
                                Content First
                            </div>
                        </NavigationMenuContent>
                    </NavigationMenuItem>

                    <NavigationMenuItem>
                        <NavigationMenuTrigger
                            className="border-b-2 border-b-transparent rounded-b-none data-[state='open']:border-black"
                        >
                            Second
                        </NavigationMenuTrigger>
                        <NavigationMenuContent>
                            <div className="w-96 h-32 bg-white">
                                Content Second
                            </div>
                        </NavigationMenuContent>
                    </NavigationMenuItem>

                    <NavigationMenuItem>
                        <NavigationMenuTrigger
                            className="border-b-2 border-b-transparent rounded-b-none data-[state='open']:border-black"
                        >
                            Third
                        </NavigationMenuTrigger>
                        <NavigationMenuContent >
                            <div className="w-96 h-32 bg-white">
                                Content Third
                            </div>
                        </NavigationMenuContent>
                    </NavigationMenuItem>
                    <NavigationMenuIndicator />
                </NavigationMenuList>
            </NavigationMenu>

[nareshbhatia]

Thank you so much, @pablotanner. Your solution gave me an idea of how to implement my use case. In my case, I want the underline when the application path matches the link url. I was able to do it with a change to the data-active attribute like this. The usage example is shown here.

[pablotanner]

Glad I was able to help!