Navigation Menu Builder

Build a navigation menu component system that renders menu items as different HTML elements or custom components based on their destination type.

Requirements

Create a navigation menu system with the following functionality:

Menu Structure

The menu should support three types of navigation items:

1. Internal links - Should render as anchor tags with href attributes for in-app navigation
2. External links - Should render as anchor tags with href and target="_blank" for external sites
3. Action buttons - Should render as buttons that trigger callback functions

Component Behavior

• The menu should be keyboard accessible and support standard menu navigation patterns
• Menu items should be visually interactive (show hover/active states)
• The menu should open and close appropriately
• Each menu item type should render with the semantically correct HTML element

Test Cases

• Clicking an internal link menu item navigates to the correct path @test
• Clicking an external link menu item opens in a new tab @test
• Clicking an action button menu item executes the callback function @test
• Menu items render with correct HTML elements (anchor vs button) @test

Implementation

@generates

API

export interface MenuItem {
  label: string;
  type: 'internal' | 'external' | 'action';
  href?: string;
  onClick?: () => void;
}

export interface NavigationMenuProps {
  items: MenuItem[];
  buttonLabel: string;
}

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

Dependencies { .dependencies }

@headlessui/react { .dependency }

Provides unstyled, accessible UI components with polymorphic rendering support.