Overview
NavCardGrid displays a responsive grid of clickable cards perfect for menu-style pages, category selection, and navigation interfaces. Each card features an icon, title, description, and action text.
Key Features
- Responsive grid (1 col mobile, 2 col tablet, 3 col desktop)
- Customizable icon colors for visual categorization
- Hover effects with smooth transitions
- Accessible links with proper focus states
Examples
Basic Navigation Grid
Standard navigation grid with 6 items demonstrating various icon colors.
Minimal (3 Items)
Smaller grids automatically adjust column count.
Custom Action Text
Use different action text for different navigation contexts.
Compact Mode
Denser layout with 4 columns and no action text. Ideal for index pages with many items.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | NavCardItem[] | required | Array of navigation items with name, description, icon, href, and iconColor |
actionText | string | "View" | Text displayed on the action link (default: 'View') |
compact | boolean | false | Enables compact mode with 4 columns and no action text |
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 |
iconColor | string | Tailwind color class for the icon (e.g., 'text-blue-400') |
Usage
import { NavCardGrid } from '@/ui/components';
import { faHome, faFolder, faClipboardList } from '@fortawesome/sharp-duotone-light-svg-icons';
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',
},
{
name: 'Tasks',
description: 'Track and complete your tasks',
icon: faClipboardList,
href: '/tasks',
iconColor: 'text-purple-400',
},
];
// Basic usage
<NavCardGrid items={navItems} />
// With custom action text
<NavCardGrid items={navItems} actionText="Open" />
// Compact mode - 4 columns, no action text
<NavCardGrid items={navItems} compact />
// With additional class names
<NavCardGrid items={navItems} className="max-w-4xl" />