Blenra
Optimized for: Gemini / ChatGPT / Claude

Advanced AI Prompt for Radix UI Dropdown with Grid Layout Content

Use this engineered prompt to drastically optimize your workflow and output.

Required Variables

  • ✦[COLUMNS]
  • ✦[GRID_ITEMS]
  • ✦[KEYBOARD_GRID_NAV]
radix-dropdown-grid-layout.txt
Build a Radix UI Dropdown Menu where the content is arranged in a [COLUMNS]-column grid. You must override the default 'up/down' keyboard navigation to support [KEYBOARD_GRID_NAV] (Left/Right/Up/Down arrows to move between grid cells). This requires a custom 'onKeyDown' handler that calculates the next item based on the grid index. Ensure each cell is a 'DropdownMenu.Item' and that screen readers announce the item's position within the grid (e.g., 'Row 1, Column 2').

Example Output

"The AI provides a grid-aware navigation hook that maps arrow keys to index math, transforming the linear Radix menu into a functional 2D interactive grid."