Expanding Tabs
Icon tabs where the one in focus opens up to show its name.
Features
- Icon tabs in a floating capsule
- The active tab opens up to show its name
- Follows the section you're reading
- No hamburger needed on mobile
Best for: Apps and compact sites that want a tab bar instead of a menu, even on phones.
Installation
npm install motion @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 and an icon (shown in the tab). |
| cta | { label: string; href: string } | - | Optional call-to-action button. |
| className | string | - | Extra classes for the outer element. |
FAQ
Is the Expanding Tabs navbar free to use?
Yes. Expanding Tabs is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Expanding Tabs 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 Expanding Tabs in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Expanding Tabs need installed?
motion, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Expanding Tabs 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.