Aligning Some NavigationMenuItems to the Right in the NavigationMenu

[vladimirzb]

Hi! I'm working with the NavigationMenu component and I'm trying to achieve a specific layout where some NavigationMenuItems are aligned to the left of the screen, while others (such as login and theme change options) are aligned to the right. I'm unsure of the best practices for accomplishing this with the NavigationMenu component.

Is there a recommended way to position some NavigationMenuItems to the right side of the screen? I'm looking for a solution that aligns with the intended use of the component and maintains accessibility and responsiveness.

Thank you in advance for your guidance!

Here is my current code:

  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
              <li className="row-span-3">
                <NavigationMenuLink asChild>
                  <a
                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                    href="/"
                  >
                    <div className="mb-2 mt-4 text-lg font-medium">
                      shadcn/ui
                    </div>
                    <p className="text-sm leading-tight text-muted-foreground">
                      Beautifully designed components that you can copy and
                      paste into your apps. Accessible. Customizable. Open
                      Source.
                    </p>
                  </a>
                </NavigationMenuLink>
              </li>
              <ListItem href="/docs" title="Introduction">
                Re-usable components built using Radix UI and Tailwind CSS.
              </ListItem>
              <ListItem href="/docs/installation" title="Installation">
                How to install dependencies and structure your app.
              </ListItem>
              <ListItem href="/docs/primitives/typography" title="Typography">
                Styles for headings, paragraphs, lists...etc
              </ListItem>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
              {components.map((component) => (
                <ListItem
                  key={component.title}
                  title={component.title}
                  href={component.href}
                >
                  {component.description}
                </ListItem>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <Link href="/docs" legacyBehavior passHref>
            <NavigationMenuLink className={navigationMenuTriggerStyle()}>
              Documentation
            </NavigationMenuLink>
          </Link>
        </NavigationMenuItem>
        {/* Conditional rendering based on login state */}
        {isLoggedIn ? (
          <NavigationMenuItem>
            <Button onClick={signOutFunction} className="">
              Cerrar sesión
            </Button>
          </NavigationMenuItem>
        ) : (
          <>
            <NavigationMenuItem>
              <Button
                onClick={() => router.push("/iniciar-sesion")}
                className=""
              >
                Iniciar Sesión
              </Button>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <Button onClick={() => router.push("/crear-cuenta")} className="">
                Crear Cuenta
              </Button>
            </NavigationMenuItem>
          </>
        )}
        {/* Mode Toggle as a NavigationMenuItem for consistency */}
        <NavigationMenuItem>
          <ModeToggle />
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );

[matty-at-rdc]

This is the top google link when you google: "radix ui right align nav menu item" and it's got nothing on it. Feels like a worthwhile question. FWIW all of my solutions are awful and feel super hacky and break the NavigationMenuViewport behavior :/

However if you just want something. I created a second menu within the nav and pushed that one left with auto left margin. Not saying it's right... Just saying I got the result I wanted :)

[Way]

Same experience, I had the same idea and wanted to align my navigation menu to the right, but I couldn't find any information about it in the radix documentation and Google brought me here - without any results.

So I tried it myself and came up with the following solution, which works for my use case.

Give the respected NavigationMenuContent of your NavigationMenu a className like "align-right":

<NavigationMenuContent className="align-right">

In your globals.css add the following class definition:

nav:has(.align-right) > .left-0 {
  right: 0;
  left: auto;
}