@syncfusion/ej2-react-navigations

ej2-react-navigations

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, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here.

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.

Setup

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

npm install @syncfusion/ej2-react-navigations

Components included

Following list of components are available in the package

• Accordion - Vertically collapsible content panel that displays one or more panels at a time within the available space.

  • Getting Started
  • API References
  • View Online Demos
  • Product Page

• ContextMenu - Graphical user interface that appears on the user right click/touch hold action. It has the support to provide nested level menu items.

  • Getting Started
  • API References
  • View Online Demos
  • Product Page

• Sidebar - Expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content.

  • Getting started
  • API references
  • View online demos
  • Product page

• Tab - Content panel to show multiple contents in a specific space, one at a time.

  • Getting Started
  • API References
  • View Online Demos
  • Product Page

• Toolbar - Displays a group of command buttons arranged horizontally.

  • Getting Started
  • API References
  • View Online Demos
  • Product Page

• TreeView - Represent hierarchical data in a tree like structure with advanced functions to edit, drag and drop, select with CheckBox and more.

  • Getting Started
  • API References
  • View Online Demos
  • Product Page

• Menu - Graphical user interface that serves as navigation header for your application or site. It has the support to provide nested level menu items that can be populated from a data source such as an array of JavaScript objects.

  • Getting Started
  • API References
  • View Online Demos
  • Product Page

Supported Frameworks

Navigation component is also offered in following list of frameworks.

1. JavaScript
2. Angular
3. VueJS
4. ASP.NET Core
5. ASP.NET MVC
6. JavaScript (ES5)

Use-case samples / Showcase samples

Sidebar component is used in the following samples.

• Expanse tracker (Source, Live Demo)
• Web mail (Source, Live Demo)

Key Features

Accordion

1. Rendering - Can be rendered based on the items collection and HTML elements.
2. Expand Mode - Supports to define single or multiple expand mode for Accordion panels.
3. RTL Support - Supports right-to-left alignment.
4. 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.

ContextMenu

1. Separator - Supports menu items grouping by using the Separator.
2. Icons and Navigations - Supports items to have Icons and Navigation URL's.
3. Template and Multilevel Nesting - Supports template and multilevel nesting in ContextMenu.
4. 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.

Toolbar

1. Scrollable - Scrollable display mode displays Toolbar commands in a single line with horizontal scrolling enabled when the commands overflow available space.
2. Popup - Popup display mode displays commands in the popup when the commands overflow available space.
3. Template Support - The Toolbar component can also be rendered based on the given HTML element aside from item based collection rendering.
4. Keyboard Support - By default, the Toolbar allows interaction with commands by using keyboard shortcuts.
5. RTL Support - The Toolbar supports right-to-left alignment.
6. Accessibility - The Toolbar provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes.

Tab

1. Rendering - Can be rendered based on the items collection and HTML elements.
2. Adaptive - Supports responsive rendering with scrollable Tabs and popup menu.
3. Customization - Provides customization support for header with icons and orientation.
4. Animation - Supports animation effects for moving previous/next contents of Tab.
5. 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.

Sidebar

1. Target - The sidebar can be initialized in any HTML element other than the body element.
2. Types - 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.
3. Left or right positions - 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.
4. Docking - Docking lets the sidebar occupy a small vertical area in a page always and typically contains shortened view of navigation options.
5. Auto close - Auto closing the sidebar control’s content allows the main content area to be more readable based on screen resolution.

TreeView

1. Data Binding - Binds the TreeView component with an array of JavaScript objects or DataManager.
2. CheckBox - Allows you to select more than one node in TreeView without affecting the UI appearance.
3. Drag and Drop - Allows you to drag and drop any node in TreeView.
4. Multi Selection - Allows you to select more than one node in TreeView.
5. Node Editing - Allows you to change the text of a node in TreeView.
6. Sorting - Allows display of the TreeView nodes in an ascending or a descending order.
7. Template - Allows you to customize the nodes in TreeView.
8. 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.

Menu

1. Rendering - Supports to render based on the items collection (array of JavaScript objects) and HTML elements.
2. Separator - Supports menu items grouping by using the Separator.
3. Icons and Navigations - Supports items to have Icons and Navigation URL's.
4. Template and Multilevel Nesting - Supports template and multilevel nesting in Menu.
5. 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.

Support

Product support is available for through following mediums.

• Creating incident in Syncfusion Direct-trac support system or Community forum.
• New GitHub issue.
• Ask your query in Stack Overflow with tag syncfusion and ej2.

License

Check the license detail here.

Changelog

Check the changelog here

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