Butter Nav
A navbar whose mega-menu is a single card. It morphs its width, height and position between menus instead of swapping dropdowns — the contents cross-fade in the direction you travelled, and a highlight pill tracks the cursor across the links.
The prompt describes every measurement and motion rule, so an agent can rebuild the component inside your own design system.
Preview
Hover across Product, Resources and Customers. One card, three shapes. The preview follows the theme above.
Installation
Butter Nav ships as a shadcn registry item. The CLI writes the file
into components/ui and wires up anything it needs.
Register the namespace once
Add it to components.json and every item installs by name
— npx shadcn@latest add @butter/butter-nav.
Usage
Everything is config. Items without a menu render as
plain links; items with one get a panel in the shared card.
Props
| Prop | Type | Default | Notes |
|---|
Keyboard
| Key | Behaviour |
|---|
How the motion works
There is one card, not five dropdowns — nothing mounts or unmounts when you move between menus.
Manual installation
Copy components/ui/butter-nav.tsx into your project. It
imports only react and your cn() helper —
install these two if @/lib/utils does not exist yet.
npm i clsx tailwind-merge
Component source
Loading source…