MenuGrid Component

Interactive grid component for displaying menu items with support for hierarchical navigation, quick access items, and submenu drilling.

Interactive Preview

Live component with different configuration options. Switch between variants and toggle code view.

Component Examples

Select different variants to see how props affect the component behavior

Preview

Student Management

Manage student records and enrollment

Payment Processing

Handle tuition and fee payments

Reports & Analytics

Financial reports and data analysis

System Settings

Configure system preferences

Communication

Send messages and notifications

Help & Support

Documentation and support resources

Props

Component accepts the following props for configuration and behavior.

PropTypeRequiredDefaultDescription
itemsMenuItem[]Required—Array of menu items to display in the grid
quickAccessItemsMenuItem[]Optional—Optional quick access items shown at the top
onItemClick(item: MenuItem) => voidOptional—Callback function when a menu item is clicked

Type Definitions

MenuItem

Simple menu item configuration for grid display

interface MenuItem {
  name: string
  description?: string
  icon: string
  href?: string
}

Usage Examples

Common patterns and implementation examples.

Basic Implementation

import { MenuGrid } from '@/components/shared/menu-grid'

const menuItems = [
  {
    name: 'Dashboard',
    description: 'Main dashboard overview',
    icon: 'home',
    href: '/dashboard',
    type: 'link'
  }
]

<MenuGrid
  items={menuItems}
  onItemClick={handleItemClick}
/>

With Quick Access

const quickAccessItems = [
  {
    name: 'New Transaction',
    description: 'Quick transaction entry',
    icon: 'plus',
    href: '/transactions/new'
  }
]

<MenuGrid
  items={menuItems}
  quickAccessItems={quickAccessItems}
  onItemClick={handleItemClick}
/>