# Utility Functions

Context scope creation utilities for managing navigation menu instances.

## Capabilities

### createNavigationMenuScope

Creates isolated context scopes for navigation menu components to prevent conflicts between multiple navigation menu instances.

```typescript { .api }
/**
 * Creates a scoped context factory for navigation menu components
 * Used internally by Radix to prevent context conflicts between multiple
 * navigation menu instances. Returns scope creation utilities.
 */
function createNavigationMenuScope(): CreateScope;
```

**Key Features:**
- Enables multiple independent navigation menus on the same page
- Provides context isolation between different navigation menu instances
- Used internally by the navigation menu system
- Works with collection and focus group scopes

**Note:** This is primarily an internal utility function used by the Radix UI system for context management. Most applications do not need to use this function directly, as each NavigationMenu component automatically creates its own isolated scope.

**Usage Examples:**

```typescript
import { createNavigationMenuScope } from "@radix-ui/react-navigation-menu";

// Basic usage (rarely needed in applications)
const useCustomNavigationMenuScope = createNavigationMenuScope();

// The scope is typically used internally by NavigationMenu components
// Most users don't need to interact with this directly

// Example of internal usage pattern (for reference)
function CustomNavigationWrapper() {
  // In most cases, you would just use NavigationMenu directly
  // which handles scoping automatically
  return (
    <NavigationMenu>
      {/* Components automatically use proper scoping */}
    </NavigationMenu>
  );
}
```

## Context Architecture

The navigation menu uses a sophisticated context system:

### Internal Context Structure

```typescript
// Internal context types (for reference)
type NavigationMenuContextValue = {
  isRootMenu: boolean;
  value: string;
  previousValue: string;
  baseId: string;
  dir: "ltr" | "rtl";
  orientation: "horizontal" | "vertical";
  rootNavigationMenu: HTMLElement | null;
  indicatorTrack: HTMLDivElement | null;
  onIndicatorTrackChange(indicatorTrack: HTMLDivElement | null): void;
  viewport: HTMLDivElement | null;
  onViewportChange(viewport: HTMLDivElement | null): void;
  onViewportContentChange(contentValue: string, contentData: ContentData): void;
  onViewportContentRemove(contentValue: string): void;
  onTriggerEnter(itemValue: string): void;
  onTriggerLeave(): void;
  onContentEnter(): void;
  onContentLeave(): void;
  onItemSelect(itemValue: string): void;
  onItemDismiss(): void;
};
```

### Multiple Navigation Menus

When you need multiple navigation menus, each NavigationMenu component automatically creates its own scope:

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

// Multiple independent navigation menus
function MultipleNavigationExample() {
  return (
    <div>
      {/* First navigation menu - automatically scoped */}
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Products</NavigationMenuTrigger>
            <NavigationMenuContent>Products content</NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
      
      {/* Second navigation menu - automatically scoped */}
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Services</NavigationMenuTrigger>
            <NavigationMenuContent>Services content</NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  );
}
```

### Nested Navigation Structures

For nested navigation, use NavigationMenuSub within content:

```typescript
function NestedNavigationExample() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Main Category</NavigationMenuTrigger>
          <NavigationMenuContent>
            {/* Use NavigationMenuSub for nested structure */}
            <NavigationMenuSub>
              <NavigationMenuList>
                <NavigationMenuItem>
                  <NavigationMenuTrigger>Subcategory</NavigationMenuTrigger>
                  <NavigationMenuContent>Sub-content</NavigationMenuContent>
                </NavigationMenuItem>
              </NavigationMenuList>
            </NavigationMenuSub>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}
```

## Best Practices

### Scope Management
- **Automatic Scoping**: NavigationMenu components handle scoping automatically
- **No Manual Scoping**: Most applications don't need to manage scopes manually
- **Multiple Menus**: Each NavigationMenu creates its own isolated context

### When Manual Scoping Might Be Needed
1. **Custom Component Wrappers**: When building complex wrapper components
2. **Advanced Integration**: When integrating with other context systems
3. **Testing**: When mocking navigation menu contexts for tests

### Recommended Pattern
```typescript
// Preferred: Let NavigationMenu handle scoping automatically
function RecommendedNavigation() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Item</NavigationMenuTrigger>
          <NavigationMenuContent>Content</NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

// Avoid: Manual scope management (unless specifically needed)
// Most applications should not need to use createNavigationMenuScope directly
```