Blue Ribbon
A solid brand-blue bar with a white pill and an announcement strip.
Features
- Solid brand-colour bar
- Current section sits in a white pill
- Closable announcement strip on top
- Mobile menu included
Best for: Brands with a strong colour, launches and sites that need an announcement bar.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | Your logo. It inherits currentColor. |
| items | NavItem[] | - | Links: label, href, optional icon and children. |
| cta | { label: string; href: string } | - | Optional call-to-action button. |
| announcement | { label: string; href: string } | - | A closable one-line message above the bar. |
| className | string | - | Extra classes for the outer element. |
FAQ
Is the Blue Ribbon navbar free to use?
Yes. Blue Ribbon is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Blue Ribbon work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Blue Ribbon in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Blue Ribbon need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Blue Ribbon accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.