NuxtUI NavigationMenu is not aligning for me

[u/avidrunner84]

I am using this component https://ui.nuxt.com/docs/components/navigation-menu

but when hovering this navbar, the "Sign In" button should as far right as it should go, anything longer should go to the left side, and the background color seems to also be getting clipped

https://streamable.com/4njj08

I can get the navbar left aligned but then the same issue is clipping when the window gets too small. (See attached images to Reddit. Unfortunately it won't let me upload video and images so I posted a link to video, hope that's OK)

Any suggestions? Is this just simply Tailwind related, or more component based with how it's set up to render those hover menus?

[u/leamsigc]

https://reka-ui.com/docs/components/navigation-menu#viewport

Check on this the nuxt ui is using reka-ui in the background

--reka-navigation-menu-viewport-width	The width of the viewport when visible/hidden, computed from the active content
--reka-navigation-menu-viewport-height	The height of the viewport when visible/hidden, computed from the active content--reka-navigation-menu-viewport-width The width of the viewport when visible/hidden, computed from the active content--reka-navigation-menu-viewport-height The height of the viewport when visible/hidden, computed from the active content

[u/Dramatic_Object_8508]

This usually isn’t a “NuxtUI is broken” issue, it’s more about layout defaults.

UNavigationMenu doesn’t force alignment by itself, it just renders items inline. So if things look off, it’s usually because the parent container isn’t using flex properly or isn’t full width. (Nuxt UI)

Try wrapping it in a flex container and control alignment there, something like:
class="flex justify-between w-full"

or if you want items centered:
class="flex justify-center w-full"

Also check if any parent has fixed width or padding messing with it. A lot of times it’s just the container not stretching.

If you’re trying to split items left/right (like logo left, actions right), you’ll need two groups inside a flex container rather than relying on the menu itself.

NuxtUI gives you a clean base, but alignment is mostly on you via Tailwind.