Toggle Sidebar B
AppearanceLight & dark mode D
Card Nav
Expandable navigation bar with card panels revealing nested links.
Default
Open the menu from the hamburger. Pick a theme and an easing in the controls underneath.
API Reference
CardNav
| Prop | Type | Default | Description |
|---|---|---|---|
logo | string | - | URL for the logo image. |
logoAlt | string | 'Logo' | Alt text for the logo image. |
items | CardNavItem[] | - | Array of navigation items with label, bgColor, textColor, and links. Only the first three are shown. |
ease | string | 'power3.out' | GSAP easing function for animations. |
baseColor | string | '#fff' | Background color for the navigation container. |
menuColor | string | undefined | Color for the hamburger menu lines. |
buttonBgColor | string | '#111' | Background color for the CTA button. |
buttonTextColor | string | 'white' | Text color for the CTA button. |
Accessibility
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab | Moves focus to the hamburger, then to the call to action. |
| Enter + Space | Opens or closes the menu from the hamburger. |
- The hamburger is a button role with aria-expanded, and the card panel is aria-hidden while closed.