CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-radix-ui--react-navigation-menu

A collection of React components for building accessible, customizable navigation menus with keyboard support and flexible layout options

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

utility-functions.mddocs/

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.

/**
 * 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:

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

// 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:

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:

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

// 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

Install with Tessl CLI

npx tessl i tessl/npm-radix-ui--react-navigation-menu

docs

content-management.md

core-components.md

index.md

indicators-submenus.md

interactive-elements.md

utility-functions.md

tile.json