Navigation Menu with Orientation Support

Build a reusable navigation menu component that supports both horizontal and vertical layouts with proper keyboard navigation.

Requirements

Create a NavigationMenu component that:

1. Accepts an orientation prop that can be either "horizontal" or "vertical"
2. Accepts a list of navigation items (with label and action/href)
3. Implements proper keyboard navigation based on orientation:
   • In vertical mode: Up/Down arrow keys navigate between items
   • In horizontal mode: Left/Right arrow keys navigate between items
   • Home key jumps to first item
   • End key jumps to last item
   • Enter/Space activates the current item
4. Provides visual indication of the currently focused item
5. Is fully accessible with proper ARIA attributes

Test Cases

The implementation should pass these test cases:

• When orientation is "vertical", pressing the Down arrow key moves focus from the first item to the second item @test
• When orientation is "horizontal", pressing the Right arrow key moves focus from the first item to the second item @test
• Pressing Home key moves focus to the first item regardless of current position @test
• Pressing End key moves focus to the last item regardless of current position @test

Implementation

@generates

API

interface NavigationItem {
  label: string;
  onClick: () => void;
}

interface NavigationMenuProps {
  orientation: 'horizontal' | 'vertical';
  items: NavigationItem[];
}

export function NavigationMenu(props: NavigationMenuProps): JSX.Element;

Dependencies { .dependencies }

@headlessui/react { .dependency }

Provides accessible UI components with built-in keyboard navigation and orientation support.