@syncfusion/ej2-vue-navigations 20.4.52 → 21.1.35

package/CHANGELOG.md

@@ -2,14 +2,25 @@
 
 ## [Unreleased]
 
-## 20.4.51 (2023-02-21)
+### Tab
 
-### TreeView
+#### Bug Fixes
+
+- `#I441253` - An issue with the `aria-disabled` role accessibility has been fixed.
+
+### Toolbar
+
+#### Breaking Changes
+
+- We improved the Toolbar alignments with a flex design, which may cause slight changes to the alignment of Toolbar items.
+
+## 20.4.53 (2023-03-07)
+
+### Sidebar
 
 #### Bug Fixes
 
-- `#I428766` - Alignment issue in TreeView node without a sub-child in RTL mode has been resolved.
-- `#I428002` - The accessibility related issues in the TreeView has been resolved.
+- `#F180770` - While dynamically setting value for showBackdrop property results in creating duplicate DOM elements in Sidebar is resolved.
 
 ### ContextMenu
 
@@ -23,6 +34,23 @@
 
 - `#I437629` - Issue with "Breadcrumb overflow mode menu creates a dark point for multiple click " has been resolved.
 
+### TreeView
+
+#### Bug Fixes
+
+- `#I436646`, `#I435360` - Resolved issue, while drag and drop other elements over TreeView component, then "not-allowed" cursor appears.
+
+## 20.4.52 (2023-02-28)
+
+## 20.4.51 (2023-02-21)
+
+### TreeView
+
+#### Bug Fixes
+
+- `#I428766` - Alignment issue in TreeView node without a sub-child in RTL mode has been resolved.
+- `#I428002` - The accessibility related issues in the TreeView has been resolved.
+
 ## 20.4.49 (2023-02-07)
 
 ### Accordion

package/README.md

@@ -1,208 +1,277 @@
-# ej2-vue-navigations
+# Vue Navigation Components
 
-![ej2-vue-navigations](https://ej2.syncfusion.com/products/images/navigations/readMe.gif)
+## What's Included in the Vue Navigation Package
 
-> 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, you can purchase one at [https://www.syncfusion.com/sales/products](https://www.syncfusion.com/sales/products) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials).
+Following list of components are available in the package.
 
-> 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.
+### Vue Accordion
 
-## Setup
+The [Vue Accordion](https://www.syncfusion.com/vue-components/vue-accordion?utm_source=npm&utm_medium=listing&utm_campaign=vue-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.
 
-To install `Navigations` and its dependent packages, use the following command.
+<p align="center">
+  <a href="https://ej2.syncfusion.com/vue/documentation/accordion/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/accordion/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/vue-components/vue-accordion?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Learn more</a>
+</p>
 
-```sh
-npm install @syncfusion/ej2-vue-navigations
-```
+<p align="center">
+<img alt="Vue Accordion Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-accordion.png">
+</p>
+
+#### Key features
+
+* [Rendering](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/accordion/default.html) - Can be rendered based on the items collection and HTML elements.
+* [Expand mode](https://ej2.syncfusion.com/vue/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/vue/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.
+
+### Vue AppBar
+
+The [Vue AppBar](https://www.syncfusion.com/vue-components/vue-appbar?utm_source=npm&utm_medium=listing&utm_campaign=vue-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/vue/documentation/appbar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/appbar/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/vue-components/vue-appbar?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Learn more</a>
+</p>
+
+<p align="center">
+<img alt="Vue AppBar Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-appbar.PNG">
+</p>
+
+#### Key features
+
+* [Modes](https://ej2.syncfusion.com/vue/documentation/appbar/size-and-color/) - `Regular`, `Prominent`, and `Dense` modes that define the AppBar height.
+* [Content arrangement](https://ej2.syncfusion.com/vue/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/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/appbar/color.html) - `Primary`, `Light`, `Dark`, and `Inherit` options to customize the AppBar color.
+* [Position](https://ej2.syncfusion.com/vue/documentation/appbar/position/) - AppBars can be placed at the top or bottom of the screen. It can also be sticky.
+
+### Vue Breadcrumb
+
+The [Vue Breadcrumb](https://www.syncfusion.com/vue-components/vue-breadcrumb?utm_source=npm&utm_medium=listing&utm_campaign=vue-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.
 
-## Components included
+<p align="center">
+  <a href="https://ej2.syncfusion.com/vue/documentation/breadcrumb/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/breadcrumb/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/vue-components/vue-breadcrumb?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Learn more</a>
+</p>
 
-Following list of components are available in the package
+<p align="center">
+<img alt="Vue Breadcrumb Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-breadcrumb.png">
+</p>
 
-* Accordion - Vertically collapsible content panel that displays one or more panels at a time within the available space.
+#### Key features
 
-  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/accordion/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=accordion)
-  * [API References](https://ej2.syncfusion.com/vue/documentation/accordion/api-accordion.html?utm_source=npm&utm_campaign=accordion)
-  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=accordion#/material/accordion/default.html)
-  * [Product Page](https://www.syncfusion.com/products/vue/accordion)
+* [Icons](https://ej2.syncfusion.com/vue/documentation/breadcrumb/icons/) - Icons can be specified in Breadcrumb items.
+* [Template](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/breadcrumb/template-and-customization.html) - Supports template for item and separator.
+* [Bind to location](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/breadcrumb/bind-to-location.html) - Supports items to be rendered based on the URL or current location.
+* [Overflow mode](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/breadcrumb/overflow-modes.html) - Used to limit the number of breadcrumb items to be displayed.
+* [Accessibility](https://ej2.syncfusion.com/vue/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.
 
-* AppBar - The AppBar displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions.
+### Vue Carousel
 
-  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/appbar/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=appbar)
-  * [API References](https://ej2.syncfusion.com/vue/documentation/appbar/api-appbar.html?utm_source=npm&utm_campaign=appbar)
-  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=appbar#/material/appbar/default.html)
-  * [Product Page](https://www.syncfusion.com/products/vue/appbar)
+The [Vue Carousel](https://www.syncfusion.com/vue-components/vue-carousel?utm_source=npm&utm_medium=listing&utm_campaign=vue-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.
 
-* Breadcrumb - Graphical user interface that helps to identify or highlight the current location within a hierarchical structure of websites. The aim is to make the user aware of their current position in a hierarchy of website links.
+<p align="center">
+  <a href="https://ej2.syncfusion.com/vue/documentation/carousel/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/carousel/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/vue-components/vue-carousel?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Learn more</a>
+</p>
 
-  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/breadcrumb/getting-started?lang=typescript&utm_source=npm&utm_campaign=breadcrumb)
-  * [API References](https://ej2.syncfusion.com/vue/documentation/api/breadcrumb?utm_source=npm&utm_campaign=breadcrumb)
-  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=breadcrumb#/material/breadcrumb/default.html)
-  * [Product Page](https://www.syncfusion.com/vue-ui-components/vue-breadcrumb)
+<p align="center">
+<img alt="Vue Carousel Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-carousel.PNG">
+</p>
 
-* Carousel - The Carousel 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.
+#### Key features
 
-  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/carousel/getting-started?lang=typescript&utm_source=npm&utm_campaign=carousel)
-  * [API References](https://ej2.syncfusion.com/vue/documentation/api/carousel?utm_source=npm&utm_campaign=carousel)
-  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=carousel#/material/carousel/default.html)
-  * [Product Page](https://www.syncfusion.com/vue-ui-components/vue-carousel)
+* [Rendering](https://ej2.syncfusion.com/vue/documentation/carousel/populating-items/) - The Carousel component can be rendered based on the items collection and data binding.
+* [Animation](https://ej2.syncfusion.com/vue/documentation/carousel/animations-and-transitions/) - Supports animation effects for moving previous/next item of Carousel.
+* [Template support](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/carousel/templates.html) - The Carousel component items and buttons can also be rendered with custom templates.
+* [Keyboard support](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/carousel/keyboard-navigation.html) - By default, the Carousel allows interaction with commands by using keyboard shortcuts.
+* [Accessibility](https://ej2.syncfusion.com/vue/documentation/carousel/accessibility/) - The Carousel provides built-in compliance with the `WAI-ARIA` specifications and it is achieved through attributes.
 
-* ContextMenu - Graphical user interface that appears on the user right click/touch hold action. It has the support to provide nested level menu items.
+### Vue ContextMenu
 
-  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/context-menu/getting-started?lang=typescript&utm_source=npm&utm_campaign=context-menu)
-  * [API References](https://ej2.syncfusion.com/vue/documentation/api/context-menu?utm_source=npm&utm_campaign=context-menu)
-  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=context-menu#/material/context-menu/default.html)
-  * [Product Page](https://www.syncfusion.com/vue-ui-components/context-menu)
+The [Vue ContextMenu](https://www.syncfusion.com/vue-components/vue-context-menu?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm) component is a graphical user interface control that appears when the user right-clicks or performs a touch and hold action.
 
-* Sidebar - 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/vue/documentation/context-menu/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/context-menu/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/vue-components/vue-context-menu?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Learn more</a>
+</p>
 
-  * [Getting started](https://ej2.syncfusion.com/vue/documentation/sidebar/getting-started?lang=typescript&utm_source=npm&utm_campaign=sidebar#getting-started)
-  * [API references](https://ej2.syncfusion.com/vue/documentation/api/sidebar?utm_source=npm&utm_campaign=sidebar)
-  * [View online demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=tab#/material/sidebar/default.html)
-  * [Product page](https://www.syncfusion.com/products/vue-ui-components/sidebar)
+<p align="center">
+<img alt="Vue ContextMenu Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-context-menu.png">
+</p>
 
-* Tab - Content panel to show multiple contents in a specific space, one at a time.
+#### Key features
 
-  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/tab/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=tab)
-  * [API References](https://ej2.syncfusion.com/vue/documentation/tab/api-tab.html?utm_source=npm&utm_campaign=tab)
-  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=tab#/material/tab/default.html)
-  * [Product Page](https://www.syncfusion.com/products/vue/tab)
+* [Separator](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/context-menu/default.html) - Supports menu items grouping by using the Separator.
+* [Icons and Navigations](https://ej2.syncfusion.com/vue/documentation/context-menu/icons-and-navigation/) - Supports items to have Icons and Navigation URL's.
+* [Template and Multilevel nesting](https://ej2.syncfusion.com/vue/documentation/context-menu/template-and-multilevel-nesting/) - Supports template and multilevel nesting in ContextMenu.
+* [Accessibility](https://ej2.syncfusion.com/vue/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.
 
-* Toolbar - Displays a group of command buttons arranged horizontally.
+### Vue Sidebar
 
-  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/toolbar/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=toolbar)
-  * [API References](https://ej2.syncfusion.com/vue/documentation/toolbar/api-toolbar.html?utm_source=npm&utm_campaign=toolbar)
-  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=toolbar#/material/toolbar/default.html)
-  * [Product Page](https://www.syncfusion.com/products/vue/toolbar)
+The [Vue Sidebar](https://www.syncfusion.com/vue-components/vue-sidebar?utm_source=npm&utm_medium=listing&utm_campaign=vue-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.
 
-* TreeView - Represent hierarchical data in a tree like structure with advanced functions to edit, drag and drop, select with CheckBox and more.
+<p align="center">
+  <a href="https://ej2.syncfusion.com/vue/documentation/sidebar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/sidebar/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/vue-components/vue-sidebar?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Learn more</a>
+</p>
 
-  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/treeview/getting-started.html?utm_source=npm&utm_campaign=treeview)
-  * [API References](https://ej2.syncfusion.com/vue/documentation/api/treeview?utm_source=npm&utm_campaign=treeview)
-  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=treeview#/material/treeview/default.html)
-  * [Product Page](https://www.syncfusion.com/vue-ui-components/tree-view)
+<p align="center">
+<img alt="Vue Sidebar Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-sidebar.png">
+</p>
 
-* 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.
+#### Key features
 
-  * [Getting Started](https://ej2.syncfusion.com/vue/documentation/menu/getting-started?lang=typescript&utm_source=npm&utm_campaign=menu)
-  * [API References](https://ej2.syncfusion.com/vue/documentation/api/menu?utm_source=npm&utm_campaign=menu)
-  * [View Online Demos](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_campaign=menu#/material/menu/default.html)
-  * [Product Page](https://www.syncfusion.com/vue-ui-components/menu)
+* [Target](https://ej2.syncfusion.com/vue/documentation/sidebar/custom-context/) - The sidebar can be initialized in any HTML element other than the body element.
+* [Types](https://ej2.syncfusion.com/vue/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/vue/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/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/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/vue/documentation/sidebar/auto-close/) - Auto closing the sidebar control’s content allows the main content area to be more readable based on screen resolution.
 
-## Supported Frameworks
+### Vue Tab
 
-`Navigation` component is also offered in following list of frameworks.
+The [Vue Tab](https://www.syncfusion.com/vue-components/vue-tabs?utm_source=npm&utm_medium=listing&utm_campaign=vue-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.
 
-1. [JavaScript](https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/navigations?utm_source=npm&utm_campaign=navigation)
-2. [Angular](https://github.com/syncfusion/ej2-angular-ui-components/tree/master/components/navigations?utm_source=npm&utm_campaign=navigation)
-3. [React](https://github.com/syncfusion/ej2-react-ui-components/tree/master/components/navigations?utm_source=npm&utm_campaign=navigation)
-4. [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/accordion)
-5. [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/accordion)
-6. [JavaScript (ES5)](https://www.syncfusion.com/javascript-ui-controls/accordion)
+<p align="center">
+  <a href="https://ej2.syncfusion.com/vue/documentation/tab/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/tab/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/vue-components/vue-tabs?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Learn more</a>
+</p>
 
-## Use-case samples / Showcase samples
+<p align="center">
+<img alt="Vue Tab Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-tabs.png">
+</p>
 
-Sidebar component is used in the following samples.
+#### Key features
 
-* 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))
+* [Rendering](https://ej2.syncfusion.com/vue/documentation/tab/adaptive/) - Can be rendered based on the items collection and HTML elements.
+* [Adaptive](https://ej2.syncfusion.com/vue/documentation/tab/adaptive/) - Supports responsive rendering with scrollable Tabs and popup menu.
+* [Customization](https://ej2.syncfusion.com/vue/documentation/tab/style/) - Provides customization support for header with icons and orientation.
+* [Animation](https://ej2.syncfusion.com/vue/documentation/tab/how-to/set-custom-animation/) - Supports animation effects for moving previous/next contents of Tab.
+* [Accessibility](https://ej2.syncfusion.com/vue/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.
 
-## Key Features
+### Vue Toolbar
 
-### Accordion
+The [Vue Toolbar](https://www.syncfusion.com/vue-components/vue-toolbar?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm) component is a feature-rich control that provides an interface for selecting a command from a collection of commands.
 
-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.
+<p align="center">
+  <a href="https://ej2.syncfusion.com/vue/documentation/toolbar/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/toolbar/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/vue-components/vue-toolbar?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Learn more</a>
+</p>
 
-### AppBar
+<p align="center">
+<img alt="Vue Toolbar Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-toolbar.png">
+</p>
 
-1. **Modes** - `Regular`, `Prominent`, and `Dense` modes that define the AppBar height.
-2. **Content arrangement** - Spacer and separator options can be used to align the content based on the UI requirement with minimal effort.
-3. **Color** - `Primary`, `Light`, `Dark`, and `Inherit` options to customize the AppBar color.
-4. **Position** - AppBars can be placed at the top or bottom of the screen. It can also be sticky.
+#### Key features
 
-### Breadcrumb
+* [Scrollable](https://ej2.syncfusion.com/vue/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/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/toolbar/popup.html) - Popup display mode displays commands in the popup when the commands overflow available space.
+* [Template support](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/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/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/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/vue/documentation/toolbar/accessibility/) - The Toolbar provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes.
 
-1. **Icons** - Icons can be specified in Breadcrumb items.
-2. **Template** - Supports template for item and separator.
-3. **Bind To Location** - Supports items to be rendered based on the URL or current location.
-4. **Overflow Mode** - Used to limit the number of breadcrumb items to be displayed.
-5. **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.
+### Vue TreeView
 
-### Carousel
+The [Vue TreeView](https://www.syncfusion.com/vue-components/vue-treeview?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm) component is a graphical user interface control that to represents hierarchical data in a tree structure.
 
-1. **Rendering** - The Carousel component can be rendered based on the items collection and data binding.
-2. **Animation** - Supports animation effects for moving previous/next item of Carousel.
-3. **Template Support** - The Carousel component items and buttons can also be rendered with custom templates.
-4. **Keyboard Support** - By default, the Carousel allows interaction with commands by using keyboard shortcuts.
-5. **Accessibility** - The Carousel provides built-in compliance with the `WAI-ARIA` specifications and it is achieved through attributes.
+<p align="center">
+  <a href="https://ej2.syncfusion.com/vue/documentation/treeview/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/treeview/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/vue-components/vue-treeview?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Learn more</a>
+</p>
 
-### ContextMenu
+<p align="center">
+<img alt="Vue TreeView Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-treeview.png">
+</p>
 
-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.
+#### Key features
 
-### Toolbar
+* [Data binding](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/treeview/local-data.html) - Binds the TreeView component with an array of JavaScript objects or DataManager.
+* [CheckBox](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/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/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/treeview/drag-and-drop.html) - Allows you to drag and drop any node in TreeView.
+* [Multi selection](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/treeview/multiple-selection.html) - Allows you to select more than one node in TreeView.
+* [Node editing](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/treeview/node-editing.html) - Allows you to change the text of a node in TreeView.
+* Sorting - Allows display of the TreeView nodes in an ascending or a descending order.
+* [Template](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/treeview/template.html) - Allows you to customize the nodes in TreeView.
+* [Accessibility](https://ej2.syncfusion.com/vue/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.
 
-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.
+### Vue Menu
 
-### Tab
+The [Vue Menu](https://www.syncfusion.com/vue-components/vue-menu-bar?utm_source=npm&utm_medium=listing&utm_campaign=vue-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.
 
-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.
+<p align="center">
+  <a href="https://ej2.syncfusion.com/vue/documentation/menu/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Getting Started</a> .
+  <a href="https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/menu/default.html">Online demos</a> .
+  <a href="https://www.syncfusion.com/vue-components/vue-menu-bar?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm">Learn more</a>
+</p>
 
-### Sidebar
+<p align="center">
+<img alt="Vue Menu Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/vue/vue-menu-bar.png">
+</p>
 
-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.
+#### Key features
 
-### TreeView
+* [Rendering](https://ej2.syncfusion.com/vue/documentation/menu/getting-started/) - Supports to render based on the items collection (array of JavaScript objects) and HTML elements.
+* [Separator](https://ej2.syncfusion.com/vue/documentation/menu/getting-started/#group-menu-items-with-separator) - Supports menu items grouping by using the Separator.
+* [Icons and Navigations](https://ej2.syncfusion.com/vue/documentation/menu/icons-and-sub-menu-items/) - Supports items to have Icons and Navigation URL's.
+* [Template and Multilevel nesting](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/menu/template.html) - Supports template and multilevel nesting in Menu.
+* [Hamburger Menu](https://ej2.syncfusion.com/vue/demos/?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm#/bootstrap5/menu/hamburger-mode.html) - Supports Hamburger Menu that provides an adaptive view.
+* [Accessibility](https://ej2.syncfusion.com/vue/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.
 
-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.
+<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>
 
-### Menu
+## Setup
+
+To install `navigations` and its dependent packages, use the following command.
+
+```sh
+npm install @syncfusion/ej2-vue-navigations
+```
+
+## Supported frameworks
 
-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.
+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/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/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/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
+
+* [Asset Management](https://ej2.syncfusion.com/showcase/vue/assetmanagement/#/dashboard?utm_source=npm&utm_campaign=navigation)
 
 ## Support
 
 Product support is available for through following mediums.
 
-* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=navigation) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=navigation).
-* New [GitHub issue](https://github.com/syncfusion/ej2-vue-ui-components/issues/new).
-* Ask your query in [Stack Overflow](https://stackoverflow.com/?utm_source=npm&utm_campaign=navigation) with tag `syncfusion` and `ej2`.
+* [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/vue?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm)
+* [GitHub issues](https://github.com/syncfusion/ej2-vue-ui-components/issues/new)
+* [Request feature or report bug](https://www.syncfusion.com/feedback/vue?utm_source=npm&utm_medium=listing&utm_campaign=vue-navigation-npm)
+* Live chat
 
-## License
+## Changelog
 
-Check the license detail [here](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/license?utm_source=npm&utm_campaign=navigation).
+Check the changelog [here](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/navigations/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
 
-## Changelog
+## 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+ [Vue UI components](https://www.syncfusion.com/vue-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.
 
-Check the changelog [here](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/components/navigations/CHANGELOG.md?utm_source=npm&utm_campaign=navigation)
+See [LICENSE FILE](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/license) for more info.
 
 © Copyright 2023 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.