Innovations

Logo Right Navbar

Mirrored layout: links on the left, CTA and logo anchoring the right side.

Preview

Source

tsx
"use client";

import { Button } from "@/components/ui/button";
import { Sparkles } from "lucide-react";

const links = [
  { label: "Product", href: "#" },
  { label: "Solutions", href: "#" },
  { label: "Pricing", href: "#" },
  { label: "Docs", href: "#" },
];

export default function NavbarLogoRight() {
  return (
    <header className="w-full border-b border-border bg-background">
      <div className="container mx-auto flex items-center justify-between gap-6 px-6 py-4">
        <nav className="hidden md:flex items-center gap-6">
          {links.map((l) => (
            <a
              key={l.label}
              href={l.href}
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              {l.label}
            </a>
          ))}
        </nav>
        <div className="flex items-center gap-4">
          <Button size="sm">Sign in</Button>
          <a href="#" className="flex items-center gap-2 text-foreground font-bold">
            <span>Acme</span>
            <Sparkles className="w-5 h-5 text-primary" />
          </a>
        </div>
      </div>
    </header>
  );
}
Claude Code Instructions

CLI Install

npx innovations add logo-right

Where to use it

A less common but distinctive layout. Good for RTL sensibilities or brands that want to subvert the default pattern. In Astro (src/layouts/Layout.astro): import NavbarLogoRight from '../components/innovations/navbars/logo-right'; Customize: edit the links array at the top of the file.