Overview
NavCardGrid displays navigation cards in multiple layout variants. Use for menu pages, category selection, and navigation interfaces.
Layout Variants
- grid - Vertical cards, 1->2->3 columns, with action text (default)
- grid-compact - Vertical cards, 1->2->4 columns, no action text
- list - Horizontal cards, full width, icon left with trailing content
- list-2col - Horizontal cards, 1->2 columns, icon left with trailing content
Examples
Grid Layout (Default)
Standard navigation grid with vertical cards. Default layout for category pages.
Grid Compact
Denser layout with 4 columns and no action text. Ideal for index pages with many items.
List Layout
Full-width horizontal cards with icon on left. Great for simple navigation lists.
List 2-Column Layout
Two-column horizontal cards. Balances density with readability.
Custom Trailing Content
List layouts support custom trailing content like badges, stats, or buttons.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | NavCardItem[] | required | Array of navigation items |
layout | 'grid' | 'grid-compact' | 'list' | 'list-2col' | 'grid' | Layout variant for the cards |
actionText | string | 'View ->' | Action link text (grid layouts only) |
className | string | - | Additional CSS classes for the grid container |
NavCardItem Interface
| Prop | Type | Description |
|---|---|---|
name | string | Display name for the card |
description | string | Brief description shown below the name |
icon | IconDefinition | FontAwesome icon to display |
href | string | Navigation target URL (or use onClick) |
onClick | () => void | Click handler (alternative to href) |
iconColor | string | Tailwind color class (e.g., 'text-blue-400') |
trailing | ReactNode | Custom trailing content for list layouts (default: chevron) |
Usage
import { NavCardGrid } from '@/ui/components';
import { faHome, faFolder } from '@fortawesome/duotone-regular-svg-icons';
import { Badge } from '@/ui/primitives';
const navItems = [
{
name: 'Dashboard',
description: 'View your overview and stats',
icon: faHome,
href: '/dashboard',
iconColor: 'text-blue-400',
},
{
name: 'Projects',
description: 'Manage your testing programs',
icon: faFolder,
href: '/projects',
iconColor: 'text-green-400',
trailing: <Badge>12</Badge>, // Custom trailing for list layouts
},
];
// Grid layout (default) - vertical cards, 3 columns
<NavCardGrid items={navItems} />
// Grid compact - vertical cards, 4 columns, no action text
<NavCardGrid items={navItems} layout="grid-compact" />
// List layout - horizontal, full width
<NavCardGrid items={navItems} layout="list" />
// List 2-column - horizontal, 2 columns
<NavCardGrid items={navItems} layout="list-2col" />