Responsive navigation bar with a built-in language menu, floating variant, animated link highlight, mobile menu and GitHub link. shadcn theme tokens, RTL-aware.
"use client";
// Generated by scripts/build-21st.mjs from src/21st/demos/navbar.tsx. Edit the source, not this file.
import { useState } from "react";
import { NavBar } from "@/components/ui/navbar";
const locales = [{ code: "en" }, { code: "fr" }, { code: "de" }, { code: "ja" }, { code: "ar" }];
const copy: Record<string, { links: string[]; cta: string }> = {
en: { links: ["Product", "Docs", "Pricing"], cta: "Get started" },
fr: { links: ["Produit", "Docs", "Tarifs"], cta: "Commencer" },
de: { links: ["Produkt", "Docs", "Preise"], cta: "Loslegen" },
ja: { links: ["製品", "ドキュメント", "料金"], cta: "はじめる" },
ar: { links: ["المنتج", "التوثيق", "الأسعار"], cta: "ابدأ الآن" },
};
const hrefs = ["#product", "/docs", "#pricing"];
const settings = {
variant: "floating",
showFlags: true,
showGitHub: true,
githubUrl: "babelize/babelize-elements",
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
const [locale, setLocale] = useState("en");
const t = copy[locale];
return (
<div className="min-h-[420px] w-full">
<NavBar
logo={<span className="font-semibold tracking-tight">Acme</span>}
links={t.links.map((label, i) => ({ label, href: hrefs[i] }))}
activeHref="/docs"
locales={locales}
value={locale}
onValueChange={setLocale}
cta={{ label: t.cta, href: "#get-started" }}
variant={s.variant as "default" | "floating"}
showFlags={s.showFlags}
showGitHub={s.showGitHub}
githubUrl={s.githubUrl}
sticky={false}
/>
</div>
);
}
Part of Babelize Elements — browse the full library on 21st.dev.