Navigation 4 is a Mintlify style mega menu: trigger labels sit in a row with a sliding highlight pill behind them, and hovering across triggers slides the panel content directionally so it feels like one continuous surface. Panels close on mouse leave, Escape, and focus leaving the nav. Built with Framer Motion and React, composed from Dropdown, Trigger, and Tab primitives you can fill with your own content.
Installation
Install dependencies.
Copy and paste the following code into your project.
Unlock the full library
Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.
Update the import paths to match your project setup.
Usage
import {
Dropdown,
Tab,
Tabs,
Trigger,
TriggerWrapper,
} from "@/components/pro/blocks/navigation-4";Basic Usage
<Dropdown>
<TriggerWrapper>
<Trigger>Watch</Trigger>
<Trigger>Library</Trigger>
<Trigger>Collections</Trigger>
</TriggerWrapper>
<Tabs>
<Tab>
<WatchPanel />
</Tab>
<Tab>
<LibraryPanel />
</Tab>
<Tab>
<CollectionsPanel />
</Tab>
</Tabs>
</Dropdown>API
<Dropdown>
Root container. Tracks which tab is open and the direction it's traveling. The panel closes on mouse leave, on Escape, and when keyboard focus moves outside the nav.
| Prop | Type | Description |
|---|---|---|
children | ReactNode | A <TriggerWrapper> followed by <Tabs>. |
className | string? | Extra classes on the root container. |
align | "start" (default) | "center" | Alignment of the dropdown viewport. Use align="center" together with className="w-full" in a full-width header for a centered mega-menu. |
<TriggerWrapper>
Wires each <Trigger> to its tab index.
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Any number of <Trigger> children. Order matches <Tab> order. |
className | string? | Extra classes on each rendered button. |
<Trigger>
Label + chevron icon. Chevron rotates when its tab is open.
| Prop | Type | Description |
|---|---|---|
children | ReactNode | The visible label. |
className | string? | Extra classes on the label span. |
<Tabs>
Container for the dropdown panel. Animates between tab panels based on the direction the cursor is traveling.
| Prop | Type | Description |
|---|---|---|
children | ReactNode | One <Tab> per <Trigger>. Order must match. |
className | string? | Extra classes on the inner panel. |
<Tab>
A single panel body. Default width is w-[500px]; override with className.
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Panel content. |
className | string? | Extra classes on the panel body. |