@syncfusion/react-navigations

React Navigation Components

The Syncfusion React Navigation package provides a feature-rich collection of UI components. Includes a context menu and toolbar components for building modern, interactive React applications.

Setup

To install navigations and its dependent packages, use the following command,

npm install @syncfusion/react-navigations

React Context Menu

The ContextMenu component displays a menu with options when triggered by a right-click or custom event. It provides a powerful way to offer context-specific actions with support for nested submenus, icons, and various customization options.

Key features

• Nested Submenus: Create hierarchical menu structures with unlimited nesting levels, allowing for organization of related commands and options.
• Icon Support: Enhance visual recognition by adding icons to menu items using CSS classes or React components (SVG).
• Animation Effects: Choose from various animation effects like FadeIn, SlideDown, and ZoomIn to control how the menu appears.
• Keyboard Navigation: Comprehensive keyboard support for accessibility, including arrow keys for navigation, Enter for selection, and Escape to close menus.
• Custom Positioning: Control the exact position of the context menu using offset coordinates or automatic positioning relative to the target element.
• Template Customization: Create fully customized menu item displays using React components as templates for advanced UI requirements.
• Separator Items: Visual grouping of related menu items using separator lines.

Usage

import { ContextMenu } from "@syncfusion/react-navigations";

export default function App() {
  const targetRef = useRef<HTMLButtonElement>(null);
  return (
    <div >
       <button ref={targetRef}> Right Click Me </button>
        <ContextMenu targetRef={targetRef as React.RefObject<HTMLElement>}>
           <MenuItem text="Cut" />
            <MenuItem text="Copy" />
           <MenuItem text="Rename" />
       </ContextMenu>
    </div>    
  );
};

Resources

• Context Menu Demo/Docs
• Context Menu API

React Toolbar

The Toolbar component helps users efficiently organize and access frequently used actions through a compact and customizable interface. It offers multiple overflow handling modes to accommodate different UI requirements and screen sizes.

Key features

• Multiple Overflow Modes: Choose from four different handling strategies when toolbar items exceed the available space:
  • Scrollable: Maintains overflow items with scrolling
  • Popup: Moves overflow items to a popup menu accessed via an expand button
  • MultiRow: Wraps overflow items to additional rows within the toolbar
  • Extended: Hides overflow items in a secondary row accessible through an expand button
• Orientation Options: Configure the toolbar in either horizontal or vertical layout to fit different UI design requirements.
• Keyboard Navigation: Comprehensive keyboard accessibility with arrow key navigation, Home/End for first/last item access, and Tab for focus management.
• Scroll Step Customization: Configure the scrolling distance in pixels for the Scrollable overflow mode.
• Flexible Item Layout: Supports toolbar items, separators, and spacers for organized grouping of actions.

Usage

import { Toolbar, ToolbarItem, ToolbarSeparator, ToolbarSpacer, OverflowMode } from "@syncfusion/react-navigations";

export default function App() {
  return (
    <Toolbar overflowMode={OverflowMode.Popup}>
      <ToolbarItem><Button>Cut</Button></ToolbarItem>
      <ToolbarItem><Button>Copy</Button></ToolbarItem>
      <ToolbarSeparator />
      <ToolbarItem><Button>Paste</Button></ToolbarItem>
      <ToolbarSpacer />
      <ToolbarItem><Button>Help</Button></ToolbarItem>
   </Toolbar>    
  );
};

Resources

• Toolbar Demo/Docs
• Toolbar API

Trusted by the world's leading companies

Support

Product support is available through following mediums.

• Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
• Live chat

Changelog

Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.

License and copyright

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for React UI components, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.

© Copyright 2026 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution.