Navbar

Full-featured navigation bar with built-in language selector, mobile menu, CTA button, and GitHub link.

Installation

bash npx shadcn@latest add @elements/navbar

Usage

import { NavBar } from "@/components/ui/navbar";

<NavBar
  logo={<span className="font-bold text-lg">MyApp</span>}
  links={[
    { label: "Home", href: "/" },
    { label: "Docs", href: "/docs" },
    { label: "Pricing", href: "/pricing" },
  ]}
  locales={[{ code: "en" }, { code: "fr" }, { code: "es" }]}
  value="en"
  onValueChange={(code) => console.log(code)}
  cta={{ label: "Get Started", href: "/signup" }}
  showGitHub
/>

Props

Prop	Type	Required	Description
`logo`	`React.ReactNode`	No	Logo element (renders before nav links)
`links`	`NavLink[]`	No	Navigation links
`locales`	`Locale[]`	No	Available locales for language selector
`value`	`string`	No	Selected locale code — pass this to control the component
`defaultValue`	`string`	No	Initial locale code when uncontrolled (default: `"en"`)
`onValueChange`	`(code: string) => void`	No	Callback when locale changes
`cta`	`{ label: string; href: string }`	No	CTA button
`showGitHub`	`boolean`	No	Show GitHub icon button
`githubUrl`	`string`	No	GitHub repository URL
`sticky`	`boolean`	No	Make navbar sticky at top (default: `true`)
`showFlags`	`boolean`	No	Show flags in language selector (default: `true`)
`linkComponent`	`React.ElementType`	No	Component used for internal links (default: `"a"`)
`className`	`string`	No	Additional CSS classes

Any other prop is spread onto the underlying <nav> element, and the ref is forwarded to it.

Links render as plain <a> elements, so NavBar works in any React app with no router installed. Pass your router's link component to opt into client-side navigation:

import Link from "next/link";

<NavBar links={links} linkComponent={Link} />;

NavLink Object

Property	Type	Description
`label`	`string`	Link text — required
`href`	`string`	Link URL — required

Locale Object

Property	Type	Description
`code`	`string`	ISO 639-1 / BCP 47 code (e.g. `"en"`, `"fr-FR"`) — required
`label`	`string`	Override display name (auto-resolved if omitted)
`flag`	`string`	Override flag emoji (auto-detected if omitted)

Examples

With Babelize SDK

Pair NavBar with the Babelize SDK for automatic locale routing:

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { NavBar } from "@/components/ui/navbar";
import { useBabelize } from "@babelize/sdk/react";

const links = [
  { label: "Home", href: "/" },
  { label: "Docs", href: "/docs" },
  { label: "Pricing", href: "/pricing" },
];

const locales = [
  { code: "en" },
  { label: "English", flag: "🇺🇸" },
  { label: "Français", flag: "🇫🇷" },
  { label: "Español", flag: "🇪🇸" },
  { label: "Deutsch", flag: "🇩🇪" },
  { label: "日本語", flag: "🇯🇵" },
  { label: "العربية", flag: "🇸🇦" },
];

export default function App() {
  const router = useRouter();
  const { locale, setLocale } = useBabelize();

  return (
    <NavBar
      logo={<span className="font-bold">MyApp</span>}
      links={links}
      locales={locales}
      value={locale}
      onValueChange={(code) => {
        setLocale(code);
        router.push(`/${code}`);
      }}
      cta={{ label: "Get Started", href: "/signup" }}
      showGitHub
    />
  );
}

With next-intl

"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { NavBar } from "@/components/ui/navbar";

export function AppNavBar() {
  const router = useRouter();
  const [locale, setLocale] = useState("en");

  return (
    <NavBar
      logo={<span className="font-bold">MyApp</span>}
      links={[
        { label: "Home", href: "/" },
        { label: "About", href: "/about" },
      ]}
      locales={[{ code: "en" }, { code: "fr" }]}
      value={locale}
      onValueChange={(code) => {
        setLocale(code);
        router.push(`/${code}`);
      }}
    />
  );
}

With react-i18next

"use client";

import { useTranslation } from "react-i18next";
import { NavBar } from "@/components/ui/navbar";

export function AppNavBar() {
  const { i18n } = useTranslation();

  return (
    <NavBar
      logo={<span className="font-bold">MyApp</span>}
      links={[{ label: "Home", href: "/" }]}
      locales={[{ code: "en" }, { code: "fr" }]}
      value={i18n.language}
      onValueChange={(code) => i18n.changeLanguage(code)}
    />
  );
}

Non-sticky

"use client";

import { NavBar } from "@/components/ui/navbar";

export default function App() {
  return (
    <NavBar
      logo={<span className="font-bold">MyApp</span>}
      links={[{ label: "Home", href: "/" }]}
      sticky={false}
    />
  );
}

Features

Responsive — hamburger menu on mobile, full layout on desktop
Built-in language selector — same dropdown component as LanguageSwitcher
RTL-aware — auto-detects RTL locales and adjusts layout
CTA button — optional call-to-action with customizable text and href
GitHub link — optional icon button linking to your repo
Sticky/non-sticky — toggle top-of-page stickiness
Keyboard accessible — arrow keys, Enter, Escape, Tab navigation
ARIA labels — proper aria-expanded, aria-haspopup, aria-label
Dark mode — built with Tailwind CSS, dark-mode compatible
Next.js Link — uses next/link for client-side navigation

Dependencies

Peer dependencies:

react >= 18
react-dom >= 18
tailwindcss >= 3
next >= 13 (uses next/link)

Credits

Created by sapatmohit.