Card Nav

Pro

A slim top bar that unfolds into colored link cards and folds away on Escape or route change.

Current page: /. Following a link closes the panel.

Customize

Cards3

Button

Installation

Card Nav is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy card-nav.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { usePathname } from "next/navigation";
import { CardNav } from "@/components/ui/card-nav";

export function Header() {
  const pathname = usePathname();
  return (
    <CardNav
      logo="Halden"
      routeKey={pathname}
      cta={{ label: "Get started", href: "/signup" }}
      cards={[
        { title: "Product", links: [{ label: "Features", href: "/features" }] },
        { title: "Company", links: [{ label: "About", href: "/about" }] },
      ]}
    />
  );
}

Props

7 properties

Property	Type	Default	Description
logo	ReactNode	—	Centered in the bar.
cards	{ title, links: { label, href }[], color?, textColor? }[]	—	Two or three link groups shown as cards.
cta	{ label, href }	—	Call to action on the right of the bar.
routeKey	string	—	Current route, such as the pathname. The panel closes whenever it changes.
onNavigate	(href, event) => void	—	Called on a plain left click with the default navigation prevented.
label	string	"Main"	Accessible name of the nav.
className	string	—	Extra classes for the nav.

Dependencies: motion