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 (dashboard variant only)
onItemClick(item: MenuItem) => voidOptional—Callback function when a menu item is clicked
variant"dashboard" | "subLanding"Optional—Layout variant. "dashboard" (default) wraps the grid in a max-w-[1440px] container with quick-access support. "subLanding" renders only the grid (no outer wrap, no quick-access), with larger tile gaps and per-tile bottom border on mobile.
iconSource"lucide" | "edlio-icons"Optional—Icon source for all tiles. CMS consumers pass ICON_SOURCE.EDLIO_SPRITE so sprite-named icons (newspaper-o, drawer3, etc.) resolve from icons-cms-legacy.svg. Pay and App consumers omit it; the Icon component falls back to Lucide.

Type Definitions

MenuItem

Tile configuration. `state` and the promotional/openInNewTab fields support category sub-landing semantics; dashboard tiles can omit them.

interface MenuItem {
  id?: string
  name: string
  description?: string
  icon: string
  href?: string
  state?: 'active' | 'promotional' | 'trial'
  openInNewTab?: boolean
  promotion?: { helpHref: string; helpLabel: string }
  actionLink?: { text: string; href: string }
  badge?: { kind: 'beta'; label: 'Beta' }
}
MenuGridVariant

Layout mode. The default "dashboard" matches the CMS home grid; "subLanding" matches the category sub-landing tile section.

type MenuGridVariant = 'dashboard' | 'subLanding'

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}
/>