Card Nav
A floating navigation bar that springs open into a row of cards, each with a title and its own links.
import { CardNav } from "pleate/effects/card-nav";Company site
Props
- groups
One card per group.
{ title, links, background?, color? }[]- logo
Brand in the middle of the bar.
ReactNode- action
Call to action on the right.
ReactNode- openLabel / closeLabel
Button names.
stringdefault "Open menu" / "Close menu"- label
Accessible name.
stringdefault "Main"
Accessibility
- The menu button is a disclosure with aria-expanded.
- Escape closes and returns focus to the button.
- Cards stack on narrow screens.