JSPM

@syncfusion/react-navigations

30.1.37
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q25014F
  • License SEE LICENSE IN license

A package of Pure React navigation components such as Toolbar and Context-menu which is used to navigate from one page to another

Package Exports

  • @syncfusion/react-navigations
  • @syncfusion/react-navigations/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@syncfusion/react-navigations) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Navigation Components

What's Included in the React Navigation Package

The React Navigations package includes the following component.

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.

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.

Trusted by the world's leading companies Syncfusion logo

Setup

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

npm install @syncfusion/react-navigations

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.

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 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.