@neynar/ui/llm-docs/navigation-menu-link.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# NavigationMenuLink

**Type**: component

NavigationMenuLink - Styled link component for navigation menus A versatile link component designed specifically for navigation menus with comprehensive styling and state management. Supports active states, hover/focus effects, and seamless framework integration through the asChild pattern. Can be used both within dropdown content and as direct navigation items. Features proper keyboard navigation and accessibility support.

## JSX Usage

```jsx
import { NavigationMenuLink } from '@neynar/ui';

<NavigationMenuLink
  asChild={true}
  active={true}
  onSelect={handleSelect}
/>
```

## Component Props

### asChild
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### active
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### onSelect
- **Type**: `(event: Event) => void`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic navigation link
<NavigationMenuLink href="/about">About Us</NavigationMenuLink>
```
### Example 2
```tsx
// Active link with current page styling
<NavigationMenuLink href="/dashboard" active>
  Dashboard
</NavigationMenuLink>
```
### Example 3
```tsx
// Rich content link in dropdown with description
<NavigationMenuLink href="/features/analytics">
  <div className="text-sm font-medium leading-none">Analytics</div>
  <p className="text-sm text-muted-foreground mt-1">
    View detailed insights and performance metrics
  </p>
</NavigationMenuLink>
```
### Example 4
```tsx
// With Next.js Link using asChild pattern
<NavigationMenuLink asChild>
  <Link href="/products" prefetch={false}>
    Products
  </Link>
</NavigationMenuLink>
```
### Example 5
```tsx
// With Remix Link using asChild pattern
<NavigationMenuLink asChild>
  <RemixLink to="/docs" prefetch="intent">
    Documentation
  </RemixLink>
</NavigationMenuLink>
```
### Example 6
```tsx
// Direct navigation with trigger button styling
<NavigationMenuLink
  href="/contact"
  className={navigationMenuTriggerStyle()}
>
  Contact Us
</NavigationMenuLink>
```
### Example 7
```tsx
// With custom selection handler
<NavigationMenuLink
  href="/logout"
  onSelect={(event) => {
    event.preventDefault();
    handleLogout();
  }}
>
  Sign Out
</NavigationMenuLink>
```
### Example 8
```tsx
// External link with icon
<NavigationMenuLink href="https://github.com" target="_blank" rel="noopener">
  <GitHubIcon className="size-4" />
  GitHub
  <ExternalLinkIcon className="size-3 ml-auto" />
</NavigationMenuLink>
```