# React Navigation Components

## What's Included in the React Navigation Package

The React Navigation package includes the following list of components.

### React Accordion

The [React Accordion](https://www.syncfusion.com/react-components/react-accordion?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm) component is a container-based control with vertically collapsible panels (vertical accordion) and stacked headers that expand or collapse one or more panels at a time within the available space.

<p align="center">
  <a href="https://ej2.syncfusion.com/react/documentation/accordion/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/accordion/default">Online demos</a> .
  <a href="https://www.syncfusion.com/react-components/react-accordion?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Learn more</a>
</p>

<p align="center">
<img alt="React Accordion Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-accordion.png">
</p>

#### Key features

* [Rendering](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/accordion/default) - Can be rendered based on the items collection and HTML elements.
* [Expand mode](https://ej2.syncfusion.com/react/documentation/accordion/expand-mode) - Supports to define single or multiple expand mode for Accordion panels.
* RTL support - Supports right-to-left alignment.
* [Accessibility](https://ej2.syncfusion.com/react/documentation/accordion/accessibility) - Provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes. By default, it allows to interact with Accordion by using keyboard shortcuts.

### React AppBar

The [React AppBar](https://www.syncfusion.com/react-components/react-appbar?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm) component displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions.

<p align="center">
  <a href="https://ej2.syncfusion.com/react/documentation/appbar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/appbar/default">Online demos</a> .
  <a href="https://www.syncfusion.com/react-components/react-appbar?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Learn more</a>
</p>

<p align="center">
<img alt="React AppBar Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-appbar.PNG">
</p>

#### Key features

* [Modes](https://ej2.syncfusion.com/react/documentation/appbar/size-and-color) - Regular, Prominent, and Dense modes that define the AppBar height.
* [Content arrangement](https://ej2.syncfusion.com/react/documentation/appbar/design) - Spacer and separator options can be used to align the content based on the UI requirement with minimal effort.
* [Color](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/appbar/color) - Primary, Light, Dark, and Inherit options to customize the AppBar color.
* [Position](https://ej2.syncfusion.com/react/documentation/appbar/position) - AppBars can be placed at the top or bottom of the screen. It can also be sticky.

### React Breadcrumb

The [React Breadcrumb](https://www.syncfusion.com/react-components/react-breadcrumb?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm) component is a graphical user interface that serves as a navigation header for your web application or site. It helps to identify or highlight the current location within the hierarchical structure of a website. It has several built-in features such as templates, icons, binding to location, overflow mode, and UI customizations.

<p align="center">
  <a href="https://ej2.syncfusion.com/react/documentation/breadcrumb/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/breadcrumb/default">Online demos</a> .
  <a href="https://www.syncfusion.com/react-components/react-breadcrumb?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Learn more</a>
</p>

<p align="center">
<img alt="React Breadcrumb Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-breadcrumb.png">
</p>

#### Key features

* [Icons](https://ej2.syncfusion.com/react/documentation/breadcrumb/icons) - Icons can be specified in Breadcrumb items.
* [Template](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/breadcrumb/template-and-customization) - Supports template for item and separator.
* [Bind to location](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/breadcrumb/bind-to-location) - Supports items to be rendered based on the URL or current location.
* [Overflow mode](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/breadcrumb/overflow-modes) - Used to limit the number of breadcrumb items to be displayed.
* [Accessibility](https://ej2.syncfusion.com/react/documentation/breadcrumb/accessibility) - Provided with built-in accessibility support that helps to access all the Breadcrumb component features through the keyboard, screen readers, or other assistive technology devices.

### React Carousel

The [React Carousel](https://www.syncfusion.com/react-components/react-carousel?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm) component allows users to display images with content, links, etc., like a slide show. Typical uses of carousels include scrolling news headlines, featured articles on home pages, and image galleries.

<p align="center">
  <a href="https://ej2.syncfusion.com/react/documentation/carousel/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/carousel/default">Online demos</a> .
  <a href="https://www.syncfusion.com/react-components/react-carousel?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Learn more</a>
</p>

<p align="center">
<img alt="React Carousel Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-carousel.PNG">
</p>

#### Key features

* [Rendering](https://ej2.syncfusion.com/react/documentation/carousel/populating-items) - The Carousel component can be rendered based on the items collection and data binding.
* [Animation](https://ej2.syncfusion.com/react/documentation/carousel/animations-and-transitions) - Supports animation effects for moving previous/next item of Carousel.
* [Template support](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/carousel/templates) - The Carousel component items and buttons can also be rendered with custom templates.
* [Keyboard support](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/carousel/keyboard-navigation) - By default, the Carousel allows interaction with commands by using keyboard shortcuts.
* [Accessibility](https://ej2.syncfusion.com/react/documentation/carousel/accessibility) - The Carousel provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes.

### React ContextMenu

The [React ContextMenu](https://www.syncfusion.com/react-components/react-context-menu?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm) component is a graphical user interface control that appears when the user right-clicks or performs a touch and hold action.

<p align="center">
  <a href="https://ej2.syncfusion.com/react/documentation/context-menu/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/context-menu/default">Online demos</a> .
  <a href="https://www.syncfusion.com/react-components/react-context-menu?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Learn more</a>
</p>

<p align="center">
<img alt="React ContextMenu Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-context-menu.png">
</p>

#### Key features

* [Separator](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/context-menu/default) - Supports menu items grouping by using the Separator.
* [Icons and Navigations](https://ej2.syncfusion.com/react/documentation/context-menu/icons-and-navigation) - Supports items to have Icons and Navigation URL's.
* [Template and Multilevel nesting](https://ej2.syncfusion.com/react/documentation/context-menu/template) - Supports template and multilevel nesting in ContextMenu.
* [Accessibility](https://ej2.syncfusion.com/react/documentation/context-menu/accessibility) - Provided with built-in accessibility support that helps to access all the ContextMenu component features through the keyboard, screen readers, or other assistive technology devices.

### React Sidebar

The [React Sidebar](https://www.syncfusion.com/react-components/react-sidebar?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm) component is an expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content.

<p align="center">
  <a href="https://ej2.syncfusion.com/react/documentation/sidebar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/sidebar/default">Online demos</a> .
  <a href="https://www.syncfusion.com/react-components/react-sidebar?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Learn more</a>
</p>

<p align="center">
<img alt="React Sidebar Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-sidebar.png">
</p>

#### Key features

* [Target](https://ej2.syncfusion.com/react/documentation/sidebar/custom-context) - The sidebar can be initialized in any HTML element other than the body element.
* [Types](https://ej2.syncfusion.com/react/documentation/sidebar/variations) - Provides complete control over the appearance of the sidebar component. The different types of the sidebar control give flexibility to view or hide the content (primary/secondary) over/above the main content by pushing, sliding, or overlaying it.
* [Left or right positions](https://ej2.syncfusion.com/react/documentation/sidebar/variations) - The sidebar control can be positioned to the left or right side of the main content area. This option allows placement of two sidebars in a page, at the left and right, to show primary content and secondary content, simultaneously.
* [Docking](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/sidebar/docking-sidebar) - Docking lets the sidebar occupy a small vertical area in a page always and typically contains shortened view of navigation options.
* [Auto close](https://ej2.syncfusion.com/react/documentation/sidebar/auto-close) - Auto closing the sidebar control’s content allows the main content area to be more readable based on screen resolution.

### React Tab

The [React Tab](https://www.syncfusion.com/react-components/react-tabs?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm) component is a simple user interface (tabs UI) for organizing related content and occupying a compact space. The tabs are aligned horizontally, and each tab is associated with its header.

<p align="center">
  <a href="https://ej2.syncfusion.com/react/documentation/tab/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/tab/default">Online demos</a> .
  <a href="https://www.syncfusion.com/react-components/react-tabs?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Learn more</a>
</p>

<p align="center">
<img alt="React Tab Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-tabs.png">
</p>

#### Key features

* [Rendering](https://ej2.syncfusion.com/react/documentation/tab/adaptive) - Can be rendered based on the items collection and HTML elements.
* [Adaptive](https://ej2.syncfusion.com/react/documentation/tab/adaptive) - Supports responsive rendering with scrollable Tabs and popup menu.
* [Customization](https://ej2.syncfusion.com/react/documentation/tab/style) - Provides customization support for header with icons and orientation.
* [Animation](https://ej2.syncfusion.com/react/documentation/tab/how-to/set-custom-animation) - Supports animation effects for moving previous/next contents of Tab.
* [Accessibility](https://ej2.syncfusion.com/react/documentation/tab/accessibility) - Provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes. By default, it allows to interact with Tab headers by using keyboard shortcuts.

### React Toolbar

The [React Toolbar](https://www.syncfusion.com/react-components/react-toolbar?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm) component is a feature-rich control that provides an interface for selecting a command from a collection of commands.

<p align="center">
  <a href="https://ej2.syncfusion.com/react/documentation/toolbar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/toolbar/default">Online demos</a> .
  <a href="https://www.syncfusion.com/react-components/react-toolbar?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Learn more</a>
</p>

<p align="center">
<img alt="React Toolbar Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-toolbar.png">
</p>

#### Key features

* [Scrollable](https://ej2.syncfusion.com/react/documentation/toolbar/responsive-mode#scrollable) - Scrollable display mode displays Toolbar commands in a single line with horizontal scrolling enabled when the commands overflow available space.
* [Popup](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/toolbar/popup) - Popup display mode displays commands in the popup when the commands overflow available space.
* [Template support](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/toolbar/template) - The Toolbar component can also be rendered based on the given HTML element aside from item based collection rendering.
* [Keyboard support](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/toolbar/keyboard-interaction) - By default, the Toolbar allows interaction with commands by using keyboard shortcuts.
* RTL support - The Toolbar supports right-to-left alignment.
* [Accessibility](https://ej2.syncfusion.com/react/documentation/toolbar/accessibility) - The Toolbar provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes.

### React TreeView

The [React TreeView](https://www.syncfusion.com/react-components/react-treeview?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm) component is a graphical user interface control that to represents hierarchical data in a tree structure.

<p align="center">
  <a href="https://ej2.syncfusion.com/react/documentation/treeview/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/treeview/default">Online demos</a> .
  <a href="https://www.syncfusion.com/react-components/react-treeview?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Learn more</a>
</p>

<p align="center">
<img alt="React TreeView Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-treeview.png">
</p>

#### Key features

* [Data binding](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/treeview/local-data) - Binds the TreeView component with an array of JavaScript objects or DataManager.
* [CheckBox](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/treeview/check-box) - Allows you to select more than one node in TreeView without affecting the UI appearance.
* [Drag and drop](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/treeview/drag-and-drop) - Allows you to drag and drop any node in TreeView.
* [Multi selection](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/treeview/multiple-selection) - Allows you to select more than one node in TreeView.
* [Node editing](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/treeview/node-editing) - Allows you to change the text of a node in TreeView.
* [Sorting](https://ej2.syncfusion.com/react/documentation/treeview/how-to/sorting-treeview-level-wise) - Allows display of the TreeView nodes in an ascending or a descending order.
* [Template](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/treeview/template) - Allows you to customize the nodes in TreeView.
* [Accessibility](https://ej2.syncfusion.com/react/documentation/treeview/accessibility) - Provides built-in accessibility support that helps to access all the TreeView component features through the keyboard, on-screen readers, or other assistive technology devices.

### React Menu

The [React Menu](https://www.syncfusion.com/react-components/react-menu-bar?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm) component is a graphical user interface control that serves as a navigation header for your web application or site. It supports data binding, templates, icons, multilevel nesting, and horizontal and vertical menus.

<p align="center">
  <a href="https://ej2.syncfusion.com/react/documentation/menu/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/menu/default">Online demos</a> .
  <a href="https://www.syncfusion.com/react-components/react-menu-bar?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Learn more</a>
</p>

<p align="center">
<img alt="React Menu Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-menu-bar.png">
</p>

#### Key features

* [Rendering](https://ej2.syncfusion.com/react/documentation/menu/getting-started) - Supports to render based on the items collection (array of JavaScript objects) and HTML elements.
* [Separator](https://ej2.syncfusion.com/react/documentation/menu/how-to/render-with-separator) - Supports menu items grouping by using the Separator.
* [Icons and Navigations](https://ej2.syncfusion.com/react/documentation/menu/icons-and-sub-menu-items) - Supports items to have Icons and Navigation URL's.
* [Template and Multilevel nesting](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/menu/template) - Supports template and multilevel nesting in Menu.
* [Hamburger Menu](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/menu/hamburger-mode) - Supports Hamburger Menu that provides an adaptive view.
* [Accessibility](https://ej2.syncfusion.com/react/documentation/menu/accessibility) - Provided with built-in accessibility support that helps to access all the Menu component features through the keyboard, screen readers, or other assistive technology devices.

### React Stepper

The [React Stepper](https://www.syncfusion.com/react-components/react-stepper?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm) component enables users to navigate through a series of steps or stages in a process within a web application. Stepper displays a list of steps with the current step highlighted, allowing users to move between steps. It includes several built-in features, such as different step types, orientation, linear flow, label positions, and template customization.

<p align="center">
  <a href="https://ej2.syncfusion.com/react/documentation/stepper/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Getting Started</a> .
  <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/bootstrap5/stepper/default">Online demos</a> .
  <a href="https://www.syncfusion.com/react-components/react-stepper?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm">Learn more</a>
</p>

<p align="center">
<img alt="React Stepper Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-stepper.png">
</p>

#### Key features

* [Step Types](https://ej2.syncfusion.com/react/documentation/stepper/steptypes) - Display steps with indicators and labels, only indicators, or only labels.
* [Orientation](https://ej2.syncfusion.com/react/documentation/stepper/orientations) - A layout to display steps in a horizontal or vertical orientation.
* [Linear Flow](https://ej2.syncfusion.com/react/documentation/stepper/linear-flow) - Enable a step-by-step progression, completing one step before moving on to the next.
* [Label Positioning](https://ej2.syncfusion.com/react/documentation/stepper/steptypes#label-positions) - Show the label at the top, bottom, left, or right.
* [Tooltip](https://ej2.syncfusion.com/react/documentation/stepper/tooltip) - Show additional information when users hover over a step, such as a label or customized text.
* [Templates](https://ej2.syncfusion.com/react/documentation/stepper/template) - Customize the default appearance and content of each step using templates.

<p align="center">
Trusted by the world's leading companies
  <a href="https://www.syncfusion.com/">
    <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
  </a>
</p>

## Setup

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

```sh
npm install @syncfusion/ej2-react-navigations
```

## Supported frameworks

Navigation components are also offered in following list of frameworks.

| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/angular.svg"  height="50" />](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | 
| :-----: | :-----: | :-----: | :-----: | :-----: |

## Showcase samples

* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm#/default)

## Support

Product support is available through following mediums.

* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
* [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm)
* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new)
* [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-navigation-npm)
* Live chat

## Changelog

Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/navigations/CHANGELOG.md?utm_source=npm&utm_campaign=navigation). 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](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).

> A free community [license](https://www.syncfusion.com/products/communitylicense) 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](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_campaign=navigation) for more info.

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