Nav Dropdown
A top-nav with dropdown panels: one panel morphs its size and slides between items instead of closing and reopening.
nav-dropdown.tsxnav-dropdown.css
Checking access…
Overview
Hovering from Product to Solutions keeps the same panel open and animates its width, height and position to the new content, which slides in from the direction you moved.
Click and keyboard work too: Enter opens, arrows move between top items, Escape closes. On narrow cards the panel spans the full width.
When to use
- Marketing sites and docs headers with grouped links.
When not to use
- Apps: use a sidebar.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/nav-dropdown.json$
npx shadcn@latest add https://sundaeui.dev/r/nav-dropdown.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/nav-dropdown.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/nav-dropdown.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy nav-dropdown.tsx and nav-dropdown.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { NavDropdown } from '@/components/sundae/nav-dropdown'
<NavDropdown />Props
| Prop | Type | Default |
|---|---|---|
items*Top items and their panel links. | { id: string; label: string; links: { title: string; desc: string }[] }[] | — |
openDelayHover intent in ms. | number | 80 |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Top items are buttons with aria-expanded controlling the panel region; links inside are real links.
- Escape closes and returns focus to the item.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-nvd; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- ← / →
- Move between items
- Enter / ↓
- Open panel
- Esc
- Close
FAQ
- Is Nav Dropdown free?
- Nav Dropdown is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Nav Dropdown?
- Run npx shadcn@latest add https://sundaeui.dev/r/nav-dropdown.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Nav Dropdown support keyboard and screen readers?
- Top items are buttons with aria-expanded controlling the panel region; links inside are real links. Escape closes and returns focus to the item.
- Does Nav Dropdown respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All navigation →- Pro
Collapsible Sidebar
Navigation · Refined - Pro
Command Palette
Navigation · Refined Dropdown Menu
Navigation · UnderstatedPagination
Navigation · RefinedUnderline Tabs
Navigation · RefinedBreadcrumbs
Navigation · Refined