@syncfusion/ej2-navigations 27.2.5 → 28.1.33-686179

package/README.md

@@ -1,301 +1,301 @@
-# JavaScript Navigation Controls
-
-## What's Included in the JavaScript Navigation Package
-
-The JavaScript Navigation package includes the following list of components.
-
-### JavaScript Accordion
-
-The [JavaScript Accordion](https://www.syncfusion.com/javascript-ui-controls/js-accordion?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) 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/documentation/accordion/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
-  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/accordion/default.html">Online demos</a> .
-  <a href="https://www.syncfusion.com/javascript-ui-controls/js-accordion?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
-</p>
-
-<p align="center">
-<img alt="JavaScript Accordion Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-accordion.png">
-</p>
-
-#### Key features
-
-* [Rendering](https://ej2.syncfusion.com/documentation/accordion/expand-mode/) - Can be rendered based on the items collection and HTML elements.
-* [Expand mode](https://ej2.syncfusion.com/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/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.
-
-### JavaScript AppBar
-
-The [JavaScript AppBar](https://www.syncfusion.com/javascript-ui-controls/js-appbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) 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/documentation/appbar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
-  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/appbar/default.html">Online demos</a> .
-  <a href="https://www.syncfusion.com/javascript-ui-controls/js-appbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
-</p>
-
-<p align="center">
-<img alt="JavaScript AppBar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-appbar.PNG">
-</p>
-
-#### Key features
-
-* [Modes](https://ej2.syncfusion.com/documentation/appbar/size-and-color/) - `Regular`, `Prominent`, and `Dense` modes that define the AppBar height.
-* [Content arrangement](https://ej2.syncfusion.com/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/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/appbar/color.html) - `Primary`, `Light`, `Dark`, and `Inherit` options to customize the AppBar color.
-* [Position](https://ej2.syncfusion.com/documentation/appbar/position/) - AppBars can be placed at the top or bottom of the screen. It can also be sticky.
-
-### JavaScript Breadcrumb
-
-The [JavaScript Breadcrumb](https://www.syncfusion.com/javascript-ui-controls/js-breadcrumb?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) 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/documentation/breadcrumb/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
-  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/default.html">Online demos</a> .
-  <a href="https://www.syncfusion.com/javascript-ui-controls/js-breadcrumb?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
-</p>
-
-<p align="center">
-<img alt="JavaScript Breadcrumb Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-breadcrumb.png">
-</p>
-
-#### Key features
-
-* [Icons](https://ej2.syncfusion.com/documentation/breadcrumb/icons/) - Icons can be specified in Breadcrumb items.
-* [Template](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/template-and-customization.html) - Supports template for item and separator.
-* [Bind to location](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/bind-to-location.html) - Supports items to be rendered based on the URL or current location.
-* [Overflow mode](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/overflow-modes.html) - Used to limit the number of breadcrumb items to be displayed.
-* [Accessibility](https://ej2.syncfusion.com/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.
-
-### JavaScript Carousel
-
-The [JavaScript Carousel](https://www.syncfusion.com/javascript-ui-controls/js-carousel?utm_source=npm&utm_medium=listing&utm_campaign=javascript-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/documentation/carousel/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
-  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/carousel/default.html">Online demos</a> .
-  <a href="https://www.syncfusion.com/javascript-ui-controls/js-carousel?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
-</p>
-
-<p align="center">
-<img alt="JavaScript Carousel Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-carousel.PNG">
-</p>
-
-#### Key features
-
-* [Rendering](https://ej2.syncfusion.com/documentation/carousel/populating-items/) - The Carousel component can be rendered based on the items collection and data binding.
-* [Animation](https://ej2.syncfusion.com/documentation/carousel/animations-and-transitions/) - Supports animation effects for moving previous/next item of Carousel.
-* [Template support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/carousel/templates.html) - The Carousel component items and buttons can also be rendered with custom templates.
-* [Keyboard support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/carousel/keyboard-navigation.html) - By default, the Carousel allows interaction with commands by using keyboard shortcuts.
-* [Accessibility](https://ej2.syncfusion.com/documentation/carousel/accessibility/) - The Carousel provides built-in compliance with the `WAI-ARIA` specifications and it is achieved through attributes.
-
-### JavaScript ContextMenu
-
-The [JavaScript ContextMenu](https://www.syncfusion.com/javascript-ui-controls/js-context-menu?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) 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/documentation/context-menu/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
-  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/context-menu/default.html">Online demos</a> .
-  <a href="https://www.syncfusion.com/javascript-ui-controls/js-context-menu?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
-</p>
-
-<p align="center">
-<img alt="JavaScript ContextMenu Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-context-menu.png">
-</p>
-
-#### Key features
-
-* [Separator](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/context-menu/default.html) - Supports menu items grouping by using the Separator.
-* [Icons and Navigations](https://ej2.syncfusion.com/documentation/context-menu/icons-and-navigation/) - Supports items to have Icons and Navigation URL's.
-* [Template and Multilevel nesting](https://ej2.syncfusion.com/documentation/context-menu/template-and-multilevel-nesting/) - Supports template and multilevel nesting in ContextMenu.
-* [Accessibility](https://ej2.syncfusion.com/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.
-
-### JavaScript Sidebar
-
-The [JavaScript Sidebar](https://www.syncfusion.com/javascript-ui-controls/js-sidebar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) 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/documentation/sidebar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
-  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/sidebar/default.html">Online demos</a> .
-  <a href="https://www.syncfusion.com/javascript-ui-controls/js-sidebar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
-</p>
-
-<p align="center">
-<img alt="JavaScript Sidebar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-sidebar.png">
-</p>
-
-#### Key features
-
-* [Target](https://ej2.syncfusion.com/documentation/sidebar/custom-context/) - The sidebar can be initialized in any HTML element other than the body element.
-* [Types](https://ej2.syncfusion.com/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/documentation/sidebar/getting-started/#position) - 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/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/sidebar/docking-sidebar.html) - 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/documentation/sidebar/auto-close/) - Auto closing the sidebar control’s content allows the main content area to be more readable based on screen resolution.
-
-### JavaScript Tab
-
-The [JavaScript Tab](https://www.syncfusion.com/javascript-ui-controls/js-tabs?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) control 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/documentation/tab/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
-  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/tab/default.html">Online demos</a> .
-  <a href="https://www.syncfusion.com/javascript-ui-controls/js-tabs?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
-</p>
-
-<p align="center">
-<img alt="JavaScript Tab Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-tabs.png">
-</p>
-
-#### Key features
-
-* [Rendering](https://ej2.syncfusion.com/documentation/tab/adaptive/) - Can be rendered based on the items collection and HTML elements.
-* [Adaptive](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/tab/responsive-modes.html) - Supports responsive rendering with scrollable Tabs and popup menu.
-* [Customization](https://ej2.syncfusion.com/documentation/tab/style/) - Provides customization support for header with icons and orientation.
-* [Animation](https://ej2.syncfusion.com/documentation/tab/how-to/set-custom-animation/) - Supports animation effects for moving previous/next contents of Tab.
-* [Accessibility](https://ej2.syncfusion.com/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.
-
-### JavaScript Toolbar
-
-The [JavaScript Toolbar](https://www.syncfusion.com/javascript-ui-controls/js-toolbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) 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/documentation/toolbar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
-  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/default.html">Online demos</a> .
-  <a href="https://www.syncfusion.com/javascript-ui-controls/js-toolbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
-</p>
-
-<p align="center">
-<img alt="JavaScript Toolbar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-toolbar.png">
-</p>
-
-#### Key features
-
-* [Scrollable](https://ej2.syncfusion.com/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/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/popup.html) - Popup display mode displays commands in the popup when the commands overflow available space.
-* [Template support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/template.html) - 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/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/keyboard-interaction.html) - 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/documentation/toolbar/accessibility/) - The Toolbar provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes.
-
-### JavaScript TreeView
-
-The [JavaScript TreeView](https://www.syncfusion.com/javascript-ui-controls/js-treeview?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a graphical user interface control that to represents hierarchical data in a tree structure.
-
-<p align="center">
-  <a href="https://ej2.syncfusion.com/documentation/treeview/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
-  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/default.html">Online demos</a> .
-  <a href="https://www.syncfusion.com/javascript-ui-controls/js-treeview?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
-</p>
-
-<p align="center">
-<img alt="JavaScript TreeView Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-treeview.png">
-</p>
-
-#### Key features
-
-* [Data binding](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/local-data.html) - Binds the TreeView component with an array of JavaScript objects or DataManager.
-* [CheckBox](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/check-box.html) - Allows you to select more than one node in TreeView without affecting the UI appearance.
-* [Drag and drop](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/drag-and-drop.html) - Allows you to drag and drop any node in TreeView.
-* [Multi selection](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/multiple-selection.html) - Allows you to select more than one node in TreeView.
-* [Node editing](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/node-editing.html) - Allows you to change the text of a node in TreeView.
-* [Sorting](https://ej2.syncfusion.com/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/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/template.html) - Allows you to customize the nodes in TreeView.
-* [Accessibility](https://ej2.syncfusion.com/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.
-
-### JavaScript Menu
-
-The [JavaScript Menu](https://www.syncfusion.com/javascript-ui-controls/js-menu-bar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a graphical user interface control that serves as a navigation header for your web application or site.
-
-<p align="center">
-  <a href="https://ej2.syncfusion.com/documentation/menu/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
-  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/menu/default.html">Online demos</a> .
-  <a href="https://www.syncfusion.com/javascript-ui-controls/js-menu-bar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
-</p>
-
-<p align="center">
-<img alt="JavaScript Menu Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-menu-bar.png">
-</p>
-
-#### Key features
-
-* [Rendering](https://ej2.syncfusion.com/documentation/menu/getting-started/#getting-started) - Supports to render based on the items collection (array of JavaScript objects) and HTML elements.
-* [Separator](https://ej2.syncfusion.com/documentation/menu/getting-started/#group-menu-items-with-separator) - Supports menu items grouping by using the Separator.
-* [Icons and Navigations](https://ej2.syncfusion.com/documentation/menu/icons-and-sub-menu-items/) - Supports items to have Icons and Navigation URL's.
-* [Template and Multilevel nesting](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/menu/template.html) - Supports template and multilevel nesting in Menu.
-* [Hamburger Menu](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/menu/hamburger-mode.html) - Supports Hamburger Menu that provides an adaptive view.
-* [Accessibility](https://ej2.syncfusion.com/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.
-
-### JavaScript Stepper
-
-The [JavaScript Stepper](https://www.syncfusion.com/javascript-ui-controls/js-stepper?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) control 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/documentation/stepper/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
-  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/stepper/default.html">Online demos</a> .
-  <a href="https://www.syncfusion.com/javascript-ui-controls/js-stepper?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
-</p>
-
-<p align="center">
-<img alt="JavaScript Stepper Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-stepper.png">
-</p>
-
-#### Key features
-
-* [Step Types](https://ej2.syncfusion.com/documentation/stepper/steptypes) - Display steps with indicators and labels, only indicators, or only labels.
-* [Orientation](https://ej2.syncfusion.com/documentation/stepper/orientations) - A layout to display steps in a horizontal or vertical orientation.
-* [Linear Flow](https://ej2.syncfusion.com/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/documentation/stepper/steptypes#label-positions) - Show the label at the top, bottom, left, or right.
-* [Tooltip](https://ej2.syncfusion.com/documentation/stepper/tooltip) - Show additional information when users hover over a step, such as a label or customized text.
-* [Templates](https://ej2.syncfusion.com/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-navigations
-```
-
-## Supported frameworks
-
-Navigation controls are also offered in following list of frameworks.
-
-| [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg"  height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-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
-
-* Expanse Tracker - [Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=sidebar#/dashboard)
-* Web mail - [Source](https://github.com/syncfusion/ej2-sample-ts-webmail), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/webmail/?utm_source=npm&utm_campaign=sidebar)
-
-## 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=javascript-navigation-npm)
-* [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new)
-* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm)
-* Live chat
-
-## Changelog
-
-Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/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+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), 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/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.
+# JavaScript Navigation Controls
+
+## What's Included in the JavaScript Navigation Package
+
+The JavaScript Navigation package includes the following list of components.
+
+### JavaScript Accordion
+
+The [JavaScript Accordion](https://www.syncfusion.com/javascript-ui-controls/js-accordion?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) 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/documentation/accordion/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/accordion/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/javascript-ui-controls/js-accordion?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="JavaScript Accordion Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-accordion.png">
+</p>
+
+#### Key features
+
+* [Rendering](https://ej2.syncfusion.com/documentation/accordion/expand-mode/) - Can be rendered based on the items collection and HTML elements.
+* [Expand mode](https://ej2.syncfusion.com/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/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.
+
+### JavaScript AppBar
+
+The [JavaScript AppBar](https://www.syncfusion.com/javascript-ui-controls/js-appbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) 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/documentation/appbar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/appbar/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/javascript-ui-controls/js-appbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="JavaScript AppBar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-appbar.PNG">
+</p>
+
+#### Key features
+
+* [Modes](https://ej2.syncfusion.com/documentation/appbar/size-and-color/) - `Regular`, `Prominent`, and `Dense` modes that define the AppBar height.
+* [Content arrangement](https://ej2.syncfusion.com/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/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/appbar/color.html) - `Primary`, `Light`, `Dark`, and `Inherit` options to customize the AppBar color.
+* [Position](https://ej2.syncfusion.com/documentation/appbar/position/) - AppBars can be placed at the top or bottom of the screen. It can also be sticky.
+
+### JavaScript Breadcrumb
+
+The [JavaScript Breadcrumb](https://www.syncfusion.com/javascript-ui-controls/js-breadcrumb?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) 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/documentation/breadcrumb/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/javascript-ui-controls/js-breadcrumb?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="JavaScript Breadcrumb Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-breadcrumb.png">
+</p>
+
+#### Key features
+
+* [Icons](https://ej2.syncfusion.com/documentation/breadcrumb/icons/) - Icons can be specified in Breadcrumb items.
+* [Template](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/template-and-customization.html) - Supports template for item and separator.
+* [Bind to location](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/bind-to-location.html) - Supports items to be rendered based on the URL or current location.
+* [Overflow mode](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/breadcrumb/overflow-modes.html) - Used to limit the number of breadcrumb items to be displayed.
+* [Accessibility](https://ej2.syncfusion.com/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.
+
+### JavaScript Carousel
+
+The [JavaScript Carousel](https://www.syncfusion.com/javascript-ui-controls/js-carousel?utm_source=npm&utm_medium=listing&utm_campaign=javascript-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/documentation/carousel/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/carousel/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/javascript-ui-controls/js-carousel?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="JavaScript Carousel Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-carousel.PNG">
+</p>
+
+#### Key features
+
+* [Rendering](https://ej2.syncfusion.com/documentation/carousel/populating-items/) - The Carousel component can be rendered based on the items collection and data binding.
+* [Animation](https://ej2.syncfusion.com/documentation/carousel/animations-and-transitions/) - Supports animation effects for moving previous/next item of Carousel.
+* [Template support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/carousel/templates.html) - The Carousel component items and buttons can also be rendered with custom templates.
+* [Keyboard support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/carousel/keyboard-navigation.html) - By default, the Carousel allows interaction with commands by using keyboard shortcuts.
+* [Accessibility](https://ej2.syncfusion.com/documentation/carousel/accessibility/) - The Carousel provides built-in compliance with the `WAI-ARIA` specifications and it is achieved through attributes.
+
+### JavaScript ContextMenu
+
+The [JavaScript ContextMenu](https://www.syncfusion.com/javascript-ui-controls/js-context-menu?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) 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/documentation/context-menu/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/context-menu/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/javascript-ui-controls/js-context-menu?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="JavaScript ContextMenu Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-context-menu.png">
+</p>
+
+#### Key features
+
+* [Separator](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/context-menu/default.html) - Supports menu items grouping by using the Separator.
+* [Icons and Navigations](https://ej2.syncfusion.com/documentation/context-menu/icons-and-navigation/) - Supports items to have Icons and Navigation URL's.
+* [Template and Multilevel nesting](https://ej2.syncfusion.com/documentation/context-menu/template-and-multilevel-nesting/) - Supports template and multilevel nesting in ContextMenu.
+* [Accessibility](https://ej2.syncfusion.com/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.
+
+### JavaScript Sidebar
+
+The [JavaScript Sidebar](https://www.syncfusion.com/javascript-ui-controls/js-sidebar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) 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/documentation/sidebar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/sidebar/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/javascript-ui-controls/js-sidebar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="JavaScript Sidebar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-sidebar.png">
+</p>
+
+#### Key features
+
+* [Target](https://ej2.syncfusion.com/documentation/sidebar/custom-context/) - The sidebar can be initialized in any HTML element other than the body element.
+* [Types](https://ej2.syncfusion.com/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/documentation/sidebar/getting-started/#position) - 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/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/sidebar/docking-sidebar.html) - 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/documentation/sidebar/auto-close/) - Auto closing the sidebar control’s content allows the main content area to be more readable based on screen resolution.
+
+### JavaScript Tab
+
+The [JavaScript Tab](https://www.syncfusion.com/javascript-ui-controls/js-tabs?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) control 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/documentation/tab/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/tab/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/javascript-ui-controls/js-tabs?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="JavaScript Tab Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-tabs.png">
+</p>
+
+#### Key features
+
+* [Rendering](https://ej2.syncfusion.com/documentation/tab/adaptive/) - Can be rendered based on the items collection and HTML elements.
+* [Adaptive](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/tab/responsive-modes.html) - Supports responsive rendering with scrollable Tabs and popup menu.
+* [Customization](https://ej2.syncfusion.com/documentation/tab/style/) - Provides customization support for header with icons and orientation.
+* [Animation](https://ej2.syncfusion.com/documentation/tab/how-to/set-custom-animation/) - Supports animation effects for moving previous/next contents of Tab.
+* [Accessibility](https://ej2.syncfusion.com/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.
+
+### JavaScript Toolbar
+
+The [JavaScript Toolbar](https://www.syncfusion.com/javascript-ui-controls/js-toolbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) 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/documentation/toolbar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/javascript-ui-controls/js-toolbar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="JavaScript Toolbar Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-toolbar.png">
+</p>
+
+#### Key features
+
+* [Scrollable](https://ej2.syncfusion.com/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/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/popup.html) - Popup display mode displays commands in the popup when the commands overflow available space.
+* [Template support](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/template.html) - 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/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/toolbar/keyboard-interaction.html) - 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/documentation/toolbar/accessibility/) - The Toolbar provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes.
+
+### JavaScript TreeView
+
+The [JavaScript TreeView](https://www.syncfusion.com/javascript-ui-controls/js-treeview?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a graphical user interface control that to represents hierarchical data in a tree structure.
+
+<p align="center">
+  <a href="https://ej2.syncfusion.com/documentation/treeview/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/javascript-ui-controls/js-treeview?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="JavaScript TreeView Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-treeview.png">
+</p>
+
+#### Key features
+
+* [Data binding](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/local-data.html) - Binds the TreeView component with an array of JavaScript objects or DataManager.
+* [CheckBox](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/check-box.html) - Allows you to select more than one node in TreeView without affecting the UI appearance.
+* [Drag and drop](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/drag-and-drop.html) - Allows you to drag and drop any node in TreeView.
+* [Multi selection](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/multiple-selection.html) - Allows you to select more than one node in TreeView.
+* [Node editing](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/node-editing.html) - Allows you to change the text of a node in TreeView.
+* [Sorting](https://ej2.syncfusion.com/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/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/treeview/template.html) - Allows you to customize the nodes in TreeView.
+* [Accessibility](https://ej2.syncfusion.com/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.
+
+### JavaScript Menu
+
+The [JavaScript Menu](https://www.syncfusion.com/javascript-ui-controls/js-menu-bar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) is a graphical user interface control that serves as a navigation header for your web application or site.
+
+<p align="center">
+  <a href="https://ej2.syncfusion.com/documentation/menu/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/menu/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/javascript-ui-controls/js-menu-bar?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="JavaScript Menu Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-menu-bar.png">
+</p>
+
+#### Key features
+
+* [Rendering](https://ej2.syncfusion.com/documentation/menu/getting-started/#getting-started) - Supports to render based on the items collection (array of JavaScript objects) and HTML elements.
+* [Separator](https://ej2.syncfusion.com/documentation/menu/getting-started/#group-menu-items-with-separator) - Supports menu items grouping by using the Separator.
+* [Icons and Navigations](https://ej2.syncfusion.com/documentation/menu/icons-and-sub-menu-items/) - Supports items to have Icons and Navigation URL's.
+* [Template and Multilevel nesting](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/menu/template.html) - Supports template and multilevel nesting in Menu.
+* [Hamburger Menu](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/menu/hamburger-mode.html) - Supports Hamburger Menu that provides an adaptive view.
+* [Accessibility](https://ej2.syncfusion.com/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.
+
+### JavaScript Stepper
+
+The [JavaScript Stepper](https://www.syncfusion.com/javascript-ui-controls/js-stepper?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm) control 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/documentation/stepper/getting-started?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm#/material/stepper/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/javascript-ui-controls/js-stepper?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="JavaScript Stepper Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-stepper.png">
+</p>
+
+#### Key features
+
+* [Step Types](https://ej2.syncfusion.com/documentation/stepper/steptypes) - Display steps with indicators and labels, only indicators, or only labels.
+* [Orientation](https://ej2.syncfusion.com/documentation/stepper/orientations) - A layout to display steps in a horizontal or vertical orientation.
+* [Linear Flow](https://ej2.syncfusion.com/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/documentation/stepper/steptypes#label-positions) - Show the label at the top, bottom, left, or right.
+* [Tooltip](https://ej2.syncfusion.com/documentation/stepper/tooltip) - Show additional information when users hover over a step, such as a label or customized text.
+* [Templates](https://ej2.syncfusion.com/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-navigations
+```
+
+## Supported frameworks
+
+Navigation controls are also offered in following list of frameworks.
+
+| [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg"  height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-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
+
+* Expanse Tracker - [Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=sidebar#/dashboard)
+* Web mail - [Source](https://github.com/syncfusion/ej2-sample-ts-webmail), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/webmail/?utm_source=npm&utm_campaign=sidebar)
+
+## 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=javascript-navigation-npm)
+* [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new)
+* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-navigation-npm)
+* Live chat
+
+## Changelog
+
+Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/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<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), 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/blob/master/license?utm_source=npm&utm_campaign=navigation) for more info.
+
+&copy; Copyright 2023 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.