Flowbite navbar in React and Next.js: the free one and an animated island

flowbite-react ships a free, MIT-licensed Navbar with a brand slot, links and a menu button that collapses them on phones. For a site header it's the right pick, and flowbite-nav.tsx further down sets it up in Next.js. For an app header there's a second option: the Dynamic Island, a black floating pill that opens into page search or a live notification and takes its accent colour from Flowbite's palette.

One payment$3

By buying you agree to the Terms.

Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Use it in Next.js

app/layout.tsx

import type { ReactNode } from "react";
import { ThemeModeScript } from "flowbite-react";
import "./globals.css";
import { AppNav } from "@/components/app-nav";
import { SiteFooter } from "@/components/site-footer";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <ThemeModeScript />
      </head>
      <body className="min-h-dvh bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-white">
        <AppNav />
        {/* room for the island: 76 px tall at top 16 (60 px on phones) */}
        <main className="mx-auto max-w-5xl px-4 pt-28">{children}</main>
        <SiteFooter />
      </body>
    </html>
  );
}

app/globals.css

@import "tailwindcss";
@import "flowbite-react/plugin/tailwindcss";
@source "../.flowbite-react/class-list.json";

/* These three lines are what flowbite-react init writes for Tailwind v4.
   The island needs no extra rule here. */

components/app-nav.tsx

"use client";
import { useRouter } from "next/navigation";
import DynamicIsland from "@/components/DynamicIsland";
import { PAGES } from "@/lib/pages";

export function AppNav() {
  const router = useRouter();

  return (
    // The island is absolutely positioned, so a fixed, zero-height header is enough.
    <header className="fixed inset-x-0 top-0 z-40">
      <DynamicIsland
        size="auto"
        top={16}
        tabs={["search", "notify"]}
        // Flowbite's palette is plain CSS variables on :root, so a shade works as the accent.
        // 500 reads better than 700 on the island's black.
        accent="var(--primary-500)"
        items={PAGES.map((page) => page.label)}
        resultTag="Page"
        searchPlaceholder="Search pages"
        avatar="A"
        notificationTitle="Invoice paid"
        notificationText="INV-2041 was paid a minute ago"
        notificationAction="Open"
        onHome={() => router.push("/")}
        onSelect={(label) => {
          const page = PAGES.find((p) => p.label === label);
          if (page) router.push(page.href);
        }}
        onNotificationAction={() => router.push("/invoices")}
      />
    </header>
  );
}

lib/pages.ts

export const PAGES = [
  { label: "Dashboard", href: "/dashboard" },
  { label: "Projects", href: "/projects" },
  { label: "Invoices", href: "/invoices" },
  { label: "Team", href: "/team" },
  { label: "Settings", href: "/settings" },
  { label: "Help", href: "/help" },
];

components/site-footer.tsx

import Link from "next/link";
import { PAGES } from "@/lib/pages";

// The island's search results are buttons, not links.
// Keep real links on every page for crawlers and for people who never open search.
export function SiteFooter() {
  return (
    <footer className="mt-24 border-t px-4 py-10">
      <nav aria-label="Pages" className="mx-auto flex max-w-5xl flex-wrap gap-x-6 gap-y-2 text-sm">
        {PAGES.map((page) => (
          <Link key={page.href} href={page.href} className="hover:underline">
            {page.label}
          </Link>
        ))}
      </nav>
    </footer>
  );
}

Good to know

What we ran on Oct 25 2026: every file on this page type-checked with TypeScript 5.9.3 against flowbite-react 0.12.17, the shipped DynamicIsland.tsx, framer-motion 14.6.0, React 19.3.1, @types/react 19.3.0 and Next.js 15.5.28's types. A wrong island tab name and a string active prop on NavbarLink both failed tsc, so the props really are checked. We did not run next build, flowbite-react init or a dev server.
We rendered flowbite-nav.tsx and the island to static HTML with React's server renderer and read them in headless Chromium with CSS compiled by Tailwind 4.3.3 and Flowbite's v4 plugin CSS. At 390 px the Flowbite links were hidden and the menu button showed; at 1440 px the links showed and the button was hidden. The closed island measured 358 x 76 px at size="regular" and 232 x 60 px at size="compact" with two tabs. No JavaScript ran there, so the menu toggle, the island's morphing and size="auto" were not exercised.
What we didn't run: Next.js 16, a real phone, Safari or Firefox, a screen reader, Flowbite's dark mode, or your own routes.
The island's search results are buttons that call onSelect, not links. Keep a plain list of links on the page, like the footer above, for crawlers and for people who never open search.
The island's CSS names Space Grotesk and JetBrains Mono but doesn't load them. Load them with next/font or change the names in dynamic-island.css. Otherwise it falls back to system-ui.
On phones the open search box grows down over the top of your page. Keep the top padding on main (pt-28 above) so the closed island doesn't cover your heading.

flowbite-react's Navbar is five parts: Navbar, NavbarBrand, NavbarToggle, NavbarCollapse and NavbarLink. Its docs put the phone behaviour this way: "On mobile device the navigation bar will be collapsed and you will be able to use the hamburger menu to toggle the menu items by adding the <NavbarToggle> component." Navbar takes fluid, rounded, border and menuOpen.
flowbite-react 0.12.17 is the current version on npm (read Oct 25 2026). It's MIT and lists react ^18 || ^19 and tailwindcss ^3 || ^4 as peers.
flowbite-nav.tsx below follows Flowbite's own navbar example, with Next.js Link passed through the as prop and the active link read from usePathname. A detail from the source: NavbarLink closes the collapsed menu when it's clicked, so on a phone the menu shuts after a client-side route change without extra code.
Flowbite has more than a link bar. flowbite-react also ships MegaMenu, Drawer and Sidebar, and Flowbite's HTML library has a bottom navigation component. One open issue to know about if you mix them: #1686, "NavbarCollapse closes when toggling a MegaMenuDropdown on mobile", was still open on Oct 25 2026.

components/flowbite-nav.tsx (free)

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Navbar, NavbarBrand, NavbarCollapse, NavbarLink, NavbarToggle } from "flowbite-react";

const LINKS = [
  { label: "Features", href: "/features" },
  { label: "Docs", href: "/docs" },
  { label: "Blog", href: "/blog" },
  { label: "Pricing", href: "/pricing" },
];

// Free route: flowbite-react's own Navbar, with Next.js Link for client-side navigation.
export function FlowbiteNav() {
  const pathname = usePathname();

  return (
    <Navbar fluid rounded className="sticky top-0 z-40 border-b border-gray-200 dark:border-gray-700">
      <NavbarBrand as={Link} href="/">
        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Acme</span>
      </NavbarBrand>
      <NavbarToggle />
      <NavbarCollapse>
        {LINKS.map((link) => (
          <NavbarLink key={link.href} as={Link} href={link.href} active={pathname === link.href}>
            {link.label}
          </NavbarLink>
        ))}
      </NavbarCollapse>
    </Navbar>
  );
}

The Navbar has no sticky or fixed prop. Its base classes are bg-white px-2 py-2.5 sm:px-4, and its inner div is a container unless you pass fluid. Add sticky top-0 z-40 through className, as flowbite-nav.tsx does, to keep it in the page flow. Use fixed inset-x-0 top-0 instead if it should sit over the content, and give the page top padding the height of the bar.
To restyle it beyond className, flowbite-react's theme prop and its ThemeProvider take a navbar theme object (root, brand, collapse, link, toggle).

Flowbite's Navbar doesn't animate between states. The Dynamic Island does one thing that a link bar doesn't: it's a black pill that widens into a search box with results, grows into a notification that collapses on its own, or turns into a small player, with a spring on its width, height and corners.
Keep Flowbite for the rest of the app and use the island when search or one live event is the main thing your header does: an admin app, a dashboard, an internal tool. app-nav.tsx above puts it in a fixed, zero-height header with search over your pages, and the footer keeps the real links.
It holds Home, up to three fixed icons and an avatar, with no brand slot and no text links. If your Flowbite header needs a logo, links and a dropdown, keep flowbite-nav.tsx.
It's the same piece as our daisyUI, shadcn and HeroUI v3 navbar guides. The island's code doesn't change between them; only the free route and the theme wiring do.

For Tailwind v4, npx flowbite-react@latest init adds two lines right after @import "tailwindcss" in your CSS: @import "flowbite-react/plugin/tailwindcss" and a @source line pointing at .flowbite-react/class-list.json. In a Next.js app it also wraps next.config with withFlowbiteReact from flowbite-react/plugin/nextjs, which builds that class list in dev and build. We read this in flowbite-react 0.12.17's source on Oct 25 2026; we did not run init.
The plugin's CSS sets Flowbite's palette as plain variables on :root (for example --primary-500: #3f83f8) and maps them into Tailwind's theme. It has no font or body rules. We compared the island's computed styles with and without the Flowbite plugin CSS (75 elements, 16 properties each, at 1440 and 390 px). The only values that changed were the 26 that take the accent colour, because without Flowbite var(--primary-500) points at nothing.
That's why app-nav.tsx passes accent="var(--primary-500)". The prop is set as a CSS variable, so any Flowbite shade works; in our render the active icon came out rgb(63, 131, 248). The 700 shade Flowbite uses for active links is darker and sits closer to the island's black.
The piece itself: the download is a Vite project with Tailwind CSS 3.4, React 18 and framer-motion ^11.11.0, and dynamic-island.css styles it with qdi- classes only. Our CSS leak audit rated it clean. Our Tailwind v4 check (Oct 25 2026, Tailwind 4.3.3 against 3.4.19) rated it a one-line fix: "The island label, subtitle and controls (font-sans on main and children, 4 elements) render in the system sans instead of Space Grotesk." Those are the zip's demo stage, which the navbar on this page doesn't use. If you keep the stage, skip @config in this app: the check's Oct 25 correction found that in UI-kit apps it either does nothing or switches the whole app's sans font. Add a class to the stage's main (we used qdi-stage) and put .qdi-stage { font-family: "Space Grotesk", system-ui, sans-serif; } in app/globals.css. That correction was measured in shadcn and daisyUI apps, not in a Flowbite one.

Install

Copy from the zipPut react/src/components into src/, then npm i framer-motion (flowbite-react already set up).
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

tabs: icons next to Home: "search", "music", "notify"
items / onSelect: what search finds, and the pick (push the route here)
onHome: the Home icon
size: "regular", "compact" or "auto" (compact under 640 px)
top: px from the top of the positioned parent
avatar: any short node at the right end
notificationTitle / notificationText / notificationAction: the bell state's text; onNotificationAction for its button
onStateChange: idle, notify, music or search
accent: any CSS colour, including a CSS variable

How qodesign compares

qodesign vs Hover.devHover.dev is best for: animated website sections you copy and paste.
qodesign vs Cult UICult UI is best for: free animated shadcn components and device mockups.

All comparisons, with prices read on each library's own site.

Questions

Does Flowbite have a navbar component for React?

Yes. flowbite-react has a free, MIT-licensed Navbar with NavbarBrand, NavbarToggle, NavbarCollapse and NavbarLink. The links collapse behind a menu button below md.

How do I use Next.js Link in a Flowbite navbar?

Pass it through the as prop: <NavbarLink as={Link} href="/docs">. NavbarBrand takes as={Link} the same way. flowbite-nav.tsx above does both.

How do I make a Flowbite navbar sticky?

There's no prop for it. Add className="sticky top-0 z-40" to Navbar, or fixed inset-x-0 top-0 with top padding on the page.

Does the Flowbite navbar close after I tap a link on mobile?

Yes. NavbarLink's click handler closes the collapsed menu, so it shuts after the route change.

Can the Dynamic Island use Flowbite's colours?

The accent can. Pass accent="var(--primary-500)" or another Flowbite shade. The pill itself stays black with white text.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.

Flowbite navbar in React and Next.js: the free one and an animated island

Use it in Next.js

Good to know

Flowbite navbar in React: what the free component gives you

Flowbite sticky navbar in Next.js

Animated navbar for a Flowbite app: the Dynamic Island

Flowbite navbar with Tailwind v4: the plugin, colours and fonts

Install

Props

How qodesign compares

Questions