Navigation Menu Bar

Build a horizontal navigation menu bar component with multiple dropdown menus that coordinate with each other to provide a better user experience.

Requirements

Create a React component that displays a navigation bar with multiple menu items. Each menu item should open a dropdown panel when clicked. The key requirement is that when one dropdown is open and the user clicks on another menu item, the currently open dropdown should automatically close and the new one should open.

The navigation bar should include at least three menu items:

• Products - Should show a dropdown with "Software", "Hardware", "Services"
• Resources - Should show a dropdown with "Documentation", "Tutorials", "Blog"
• Company - Should show a dropdown with "About Us", "Careers", "Contact"

Each dropdown should be clearly visible when open and hidden when closed. The dropdowns should position themselves below their respective menu buttons.

Interaction Behavior

• Clicking a menu button toggles its associated dropdown
• When opening a new dropdown, any currently open dropdown in the navigation bar should automatically close
• Clicking outside the navigation area should close any open dropdown
• Users should be able to click items within the dropdown menus

Test Cases

• When the Products menu is open and the user clicks the Resources button, the Products dropdown closes and the Resources dropdown opens @test
• When a dropdown is open and the user clicks outside the navigation bar, the dropdown closes @test
• Multiple menu buttons can be toggled in sequence, with only one dropdown visible at a time @test

Implementation

@generates

API

export default function NavigationMenu(): JSX.Element;

Dependencies { .dependencies }

@headlessui/react { .dependency }

Provides accessible, unstyled UI component primitives for React applications.