Card nav
A compact nav bar that opens into a row of link cards with a deliberate focus path.
Open the menu, then tab through the destination cards. Escape returns focus to the trigger.
Implementation
1"use client";2 3import {4 useEffect,5 useId,6 useRef,7 useState,8 type CSSProperties,9 type HTMLAttributes,10 type ReactNode,11} from "react";12import { Menu, X } from "lucide-react";13 14export type CardNavLink = {15 label: string;16 href: string;17};18 19export type CardNavCard = {20 id: string;21 label: string;22 description?: string;23 links: readonly CardNavLink[];24};25 26export type CardNavCta = {27 label: string;28 href: string;