# Interactive Elements

Trigger and link components that handle user interactions with keyboard and pointer support.

## Capabilities

### NavigationMenuTrigger

Interactive button element that triggers the display of associated navigation content, with built-in keyboard and pointer event handling.

```typescript { .api }
/**
 * Interactive trigger button for menu items with accessibility support
 * Handles click, hover, and keyboard interactions to open/close menu content
 * Automatically manages ARIA attributes and focus states
 */
const NavigationMenuTrigger: React.ForwardRefExoticComponent<
  NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>
>;

interface NavigationMenuTriggerProps 
  extends React.ComponentPropsWithoutRef<"button"> {}
```

**Key Features:**
- Automatic ARIA attributes (`aria-expanded`, `aria-controls`)
- Keyboard navigation (Enter, Space, Arrow keys)
- Hover delay and skip delay behavior
- Focus management and visual states
- Pointer event handling (mouse, touch)

**Usage Examples:**

```typescript
import { 
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent
} from "@radix-ui/react-navigation-menu";

function TriggerExample() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger className="nav-trigger">
            Products
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            Product information here
          </NavigationMenuContent>
        </NavigationMenuItem>
        
        <NavigationMenuItem>
          <NavigationMenuTrigger 
            onPointerEnter={() => console.log("Hover started")}
            onPointerLeave={() => console.log("Hover ended")}
            onClick={() => console.log("Clicked")}
          >
            Services
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            Service information here
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

// Custom trigger with disabled state
function DisabledTriggerExample() {
  return (
    <NavigationMenuItem>
      <NavigationMenuTrigger disabled>
        Coming Soon
      </NavigationMenuTrigger>
    </NavigationMenuItem>
  );
}
```

### NavigationMenuLink

Navigation link component with active state support and custom selection event handling.

```typescript { .api }
/**
 * Navigation link component with active state and selection events
 * @param active - Whether this link represents the current page/section
 * @param onSelect - Custom selection event handler (called before navigation)
 */
const NavigationMenuLink: React.ForwardRefExoticComponent<
  NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>
>;

interface NavigationMenuLinkProps 
  extends Omit<React.ComponentPropsWithoutRef<"a">, "onSelect"> {
  active?: boolean;
  onSelect?: (event: Event) => void;
}
```

**Key Features:**
- Active state with `aria-current="page"` when active
- Custom selection event system
- Focus group integration for keyboard navigation
- Automatic menu dismissal on selection
- Support for both internal and external links

**Usage Examples:**

```typescript
import { 
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
  NavigationMenuContent
} from "@radix-ui/react-navigation-menu";

function LinkExample() {
  const [currentPage, setCurrentPage] = React.useState("/home");

  return (
    <NavigationMenu>
      <NavigationMenuList>
        {/* Direct navigation link */}
        <NavigationMenuItem>
          <NavigationMenuLink 
            href="/home"
            active={currentPage === "/home"}
            onSelect={(event) => {
              console.log("Navigating to home");
              setCurrentPage("/home");
            }}
          >
            Home
          </NavigationMenuLink>
        </NavigationMenuItem>
        
        {/* Links within content */}
        <NavigationMenuItem>
          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink 
              href="/products/web"
              active={currentPage === "/products/web"}
            >
              Web Development
            </NavigationMenuLink>
            <NavigationMenuLink 
              href="/products/mobile"
              active={currentPage === "/products/mobile"}
            >
              Mobile Apps
            </NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
        
        {/* External link */}
        <NavigationMenuItem>
          <NavigationMenuLink 
            href="https://example.com"
            target="_blank"
            rel="noopener noreferrer"
            onSelect={(event) => {
              console.log("Opening external link");
            }}
          >
            External Resource
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

// Link with custom selection handling
function CustomLinkExample() {
  return (
    <NavigationMenuItem>
      <NavigationMenuLink
        href="/custom"
        onSelect={(event) => {
          // Prevent default navigation
          event.preventDefault();
          
          // Custom handling (e.g., modal, confirmation)
          if (confirm("Are you sure you want to navigate?")) {
            window.location.href = "/custom";
          }
        }}
      >
        Custom Link
      </NavigationMenuLink>
    </NavigationMenuItem>
  );
}
```

## Event Handling

Both trigger and link components support comprehensive event handling:

### Trigger Events

```typescript
// Pointer events
onPointerEnter?: (event: React.PointerEvent) => void;
onPointerMove?: (event: React.PointerEvent) => void;
onPointerLeave?: (event: React.PointerEvent) => void;

// Click and keyboard events
onClick?: (event: React.MouseEvent) => void;
onKeyDown?: (event: React.KeyboardEvent) => void;

// Focus events
onFocus?: (event: React.FocusEvent) => void;
onBlur?: (event: React.FocusEvent) => void;
```

### Link Events

```typescript
// Custom selection event
onSelect?: (event: Event) => void;

// Standard anchor events
onClick?: (event: React.MouseEvent) => void;
onKeyDown?: (event: React.KeyboardEvent) => void;
onFocus?: (event: React.FocusEvent) => void;
```

## Accessibility Features

- **ARIA Support**: Automatic ARIA attributes for screen readers
- **Keyboard Navigation**: Full keyboard support with arrow keys, Enter, Space, Tab
- **Focus Management**: Proper focus order and visual focus indicators
- **Active States**: Clear indication of current page/section
- **Selection Events**: Custom event system for enhanced interaction tracking

## Data Attributes

Interactive elements expose data attributes for styling:

### NavigationMenuTrigger Data Attributes

```css
[data-state="open"] { /* Trigger is active (content is open) */ }
[data-state="closed"] { /* Trigger is inactive */ }
[data-disabled] { /* Trigger is disabled */ }
```

**Usage Example:**

```css
.nav-trigger[data-state="open"] {
  background-color: var(--accent-color);
  color: white;
}

.nav-trigger[data-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### NavigationMenuLink Data Attributes

```css
[data-active] { /* Link represents the current page */ }
```

**Usage Example:**

```css
.nav-link[data-active] {
  font-weight: bold;
  color: var(--primary-color);
}

.nav-link[data-active]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-color);
}
```