navbars /
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-rightWhere 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.