❤
npm
Sign UpSign In

@syncfusion/ej2-navigations
TypeScript icon, indicating that this package has built-in type declarations

28.1.39 • Public • Published

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 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.

Getting Started . Online demos . Learn more

JavaScript Accordion Control

Key features

  • Rendering - Can be rendered based on the items collection and HTML elements.
  • Expand mode - Supports to define single or multiple expand mode for Accordion panels.
  • RTL support - Supports right-to-left alignment.
  • 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 displays information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions.

Getting Started . Online demos . Learn more

JavaScript AppBar Control

Key features

  • Modes - Regular, Prominent, and Dense modes that define the AppBar height.
  • Content arrangement - Spacer and separator options can be used to align the content based on the UI requirement with minimal effort.
  • Color - Primary, Light, Dark, and Inherit options to customize the AppBar color.
  • Position - AppBars can be placed at the top or bottom of the screen. It can also be sticky.

JavaScript Breadcrumb

The JavaScript Breadcrumb 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.

Getting Started . Online demos . Learn more

JavaScript Breadcrumb Control

Key features

  • Icons - Icons can be specified in Breadcrumb items.
  • Template - Supports template for item and separator.
  • Bind to location - Supports items to be rendered based on the URL or current location.
  • Overflow mode - Used to limit the number of breadcrumb items to be displayed.
  • 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 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.

Getting Started . Online demos . Learn more

JavaScript Carousel Control

Key features

  • Rendering - The Carousel component can be rendered based on the items collection and data binding.
  • Animation - Supports animation effects for moving previous/next item of Carousel.
  • Template support - The Carousel component items and buttons can also be rendered with custom templates.
  • Keyboard support - By default, the Carousel allows interaction with commands by using keyboard shortcuts.
  • Accessibility - The Carousel provides built-in compliance with the WAI-ARIA specifications and it is achieved through attributes.

JavaScript ContextMenu

The JavaScript ContextMenu is a graphical user interface control that appears when the user right-clicks or performs a touch and hold action.

Getting Started . Online demos . Learn more

JavaScript ContextMenu Control

Key features

  • Separator - Supports menu items grouping by using the Separator.
  • Icons and Navigations - Supports items to have Icons and Navigation URL's.
  • Template and Multilevel nesting - Supports template and multilevel nesting in ContextMenu.
  • 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 is an expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content.

Getting Started . Online demos . Learn more

JavaScript Sidebar Control

Key features

  • Target - The sidebar can be initialized in any HTML element other than the body element.
  • 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.
  • 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.
  • Docking - Docking lets the sidebar occupy a small vertical area in a page always and typically contains shortened view of navigation options.
  • 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 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.

Getting Started . Online demos . Learn more

JavaScript Tab Control

Key features

  • Rendering - Can be rendered based on the items collection and HTML elements.
  • Adaptive - Supports responsive rendering with scrollable Tabs and popup menu.
  • Customization - Provides customization support for header with icons and orientation.
  • Animation - Supports animation effects for moving previous/next contents of 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 is a feature-rich control that provides an interface for selecting a command from a collection of commands.

Getting Started . Online demos . Learn more

JavaScript Toolbar Control

Key features

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

JavaScript TreeView

The JavaScript TreeView is a graphical user interface control that to represents hierarchical data in a tree structure.

Getting Started . Online demos . Learn more

JavaScript TreeView Control

Key features

  • Data binding - Binds the TreeView component with an array of JavaScript objects or DataManager.
  • CheckBox - Allows you to select more than one node in TreeView without affecting the UI appearance.
  • Drag and drop - Allows you to drag and drop any node in TreeView.
  • Multi selection - Allows you to select more than one node in TreeView.
  • Node editing - 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 - Allows you to customize the nodes in 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 is a graphical user interface control that serves as a navigation header for your web application or site.

Getting Started . Online demos . Learn more

JavaScript Menu Control

Key features

  • Rendering - Supports to render based on the items collection (array of JavaScript objects) and HTML elements.
  • Separator - Supports menu items grouping by using the Separator.
  • Icons and Navigations - Supports items to have Icons and Navigation URL's.
  • Template and Multilevel nesting - Supports template and multilevel nesting in Menu.
  • Hamburger Menu - Supports Hamburger Menu that provides an adaptive view.
  • 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 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.

Getting Started . Online demos . Learn more

JavaScript Stepper Control

Key features

  • Step Types - Display steps with indicators and labels, only indicators, or only labels.
  • Orientation - A layout to display steps in a horizontal or vertical orientation.
  • Linear Flow - Enable a step-by-step progression, completing one step before moving on to the next.
  • Label Positioning - Show the label at the top, bottom, left, or right.
  • Tooltip - Show additional information when users hover over a step, such as a label or customized text.
  • Templates - Customize the default appearance and content of each step using templates.

Trusted by the world's leading companies Syncfusion logo

Setup

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

npm install @syncfusion/ej2-navigations

Supported frameworks

Navigation controls are also offered in following list of frameworks.


     Angular    
       React      
       Vue         
  ASP.NET Core  
  ASP.NET MVC  

Showcase samples

Support

Product support is available through following mediums.

Changelog

Check the changelog here. 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® licensed software, including this component, is subject to the terms and conditions of Syncfusion® EULA. To acquire a license for 80+ JavaScript UI controls, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.

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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
20.1.51-104604beta
28.1.390latest

Version History

VersionDownloads (Last 7 Days)Published
28.1.390
28.1.379,997
28.1.361,258
28.1.351,411
28.1.332,162
27.2.57,244
27.2.41,741
27.2.3637
27.2.2883
27.1.584,808
27.1.571,138
27.1.56216
27.1.55485
27.1.535,127
20.1.51-104604
27.1.52436
27.1.51428
27.1.50846
27.1.48422
26.2.128,532
26.2.11367
26.2.108,077
26.2.8953
26.2.7904
26.2.5193
26.2.4451
26.1.412,141
26.1.40539
26.1.39310
26.1.38237
26.1.35535
25.2.65,391
25.2.4709
25.2.3413
25.1.421,460
25.1.35-5799880
25.1.41420
25.1.40201
25.1.39361
25.1.38251
25.1.37193
25.1.35581
24.2.86,604
24.2.4582
24.2.3233
24.1.462,165
24.1.411,408
23.2.76,044
23.2.5498
22.2.8-1849930
23.2.4494
23.1.441,105
23.1.43399
17.3.14-966150
23.1.41194
23.1.40366
23.1.3961
23.1.36331
22.2.113,429
22.2.8499
22.2.738
22.2.586
22.1.391,209
22.1.3885
22.1.3674
21.1.421,808
21.1.360
22.1.34118
21.2.93,213
21.2.848
21.2.6131
21.2.5257
21.2.463
21.2.390
21.1.391,102
21.1.3830
16.4.52-465850
21.1.3725
21.1.35224
20.4.5311,252
20.4.5212
20.4.5158
20.4.49220
20.4.4868
20.4.44207
20.4.43295
20.4.4248
20.4.40148
20.4.38218
20.3.60904
20.3.5888
20.3.5713
20.3.56149
20.3.5246
20.3.5046
20.3.4930
20.3.485
20.3.4751
20.2.50924
20.2.4956
20.2.4841
20.2.46115
20.2.4521
20.2.4468
20.2.4324
20.2.3967
20.2.3839
20.2.36319
20.1.616,267
20.1.6015
20.1.5836
20.1.574
20.1.5645
20.1.5532
20.1.51313
20.1.4849
20.1.4715
19.4.567,083
19.4.55118
19.4.53254
19.4.5271
19.4.50438
19.4.48167
19.4.479
19.4.41166
19.4.408
19.4.3886
19.3.57254
19.3.5610
19.3.5463
19.3.5365
19.3.4648
19.3.4524
19.3.4422
19.3.4323
19.2.62747
19.2.6053
19.2.5911
19.2.56134
19.2.553
19.2.5178
19.2.4865
19.2.4681
19.2.4417
19.1.69308
19.1.67142
19.1.66112
19.1.6328
19.1.5924
19.1.5811
19.1.5714
19.1.54160
18.4.473,547
18.4.44202
18.4.4272
18.4.419
18.4.3933
18.4.3526
17.2.55-12054793
18.4.3418
18.4.3321
18.4.3156
18.4.3010
18.3.53128
18.3.5137
17.2.52-12054790
18.3.5020
18.3.4721
18.3.441
17.2.49-beta1
18.3.426
18.3.409
18.3.355
18.2.58246
18.2.5738
18.2.5516
18.2.5472
18.2.4765
18.2.465
18.2.44246
18.1.57887
18.1.552
18.1.545
18.1.526
18.1.4622
18.1.4522
18.1.433
18.1.423
18.1.36-beta0
17.4.551,530
17.4.5148
17.4.5041
17.4.491
17.4.471
17.4.466
17.4.441
17.4.433
17.4.4220
17.4.411
17.4.3942
17.3.34121
17.3.2713
17.3.260
17.3.211
17.3.198
17.3.170
17.3.160
17.3.14116
17.3.9-beta1
17.2.49307
17.2.48-beta0
17.2.29-beta1
17.2.472
17.2.461
17.2.4114
17.2.401
17.2.390
17.2.362
17.2.340
17.2.28-beta0
17.1.4914
17.1.487
17.1.473
17.1.432
17.1.420
17.1.417
17.1.402
17.1.383
17.1.32-beta0
16.4.54306
16.4.530
16.4.529
17.1.1-beta2
16.4.470
16.4.450
16.4.441
16.4.420
16.4.40-beta1
16.3.34107
16.3.331
16.3.3013
16.3.290
16.3.270
16.3.250
16.3.240
16.3.230
16.3.210
16.3.177
16.2.50111
16.2.490
16.2.480
16.2.470
16.2.460
16.2.450
16.2.441
16.2.412
16.1.42178
16.1.401
16.1.380
16.1.370
16.1.351
16.1.340
16.1.320
16.1.281
16.1.261
16.1.240
15.4.300
15.4.273
15.4.260
15.4.250
15.4.230
15.4.220
15.4.211
15.4.200
15.4.170
1.0.251
1.0.221
1.0.190
1.0.180
1.0.170
1.0.141
1.0.110
1.0.101
1.0.80
1.0.50
1.0.40
1.0.30
1.0.00

Package Sidebar

Install

npm i @syncfusion/ej2-navigations

Repository

github.com/syncfusion/ej2-javascript-ui-controls

Homepage

www.syncfusion.com/javascript-ui-controls

Weekly Downloads

118,530

Version

28.1.39

License

SEE LICENSE IN license

Unpacked Size

36.5 MB

Total Files

1437

Last publish

Collaborators

  • syncfusionorg
  • essentialjs2
  • syncfusion-javascript
Try on RunKit
Report malware