Aligning Some NavigationMenuItems to the Right in the NavigationMenu

Question

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>
  );

Answer 1

Add the following CSS:

ul {
  width: 100vw; // Make it full-screen wide
  display: flex; // Necessary for flex-grow to work
}

li:nth-child(2) {
  flex-grow: 1;
}

The key here is that you need to add flex-grow: 1 to the last <li> you want to keep on the left side. In the case of your StackBlitz snippet, it's the second <li>.

See the forked StackBlitz snippet.

Screenshot: