@syncfusion/ej2-navigations

What is @syncfusion/ej2-navigations?

@syncfusion/ej2-navigations is a comprehensive package that provides a variety of navigation components for building modern web applications. It includes components like menus, toolbars, tabs, accordions, and more, which are essential for creating intuitive and user-friendly interfaces.

What are @syncfusion/ej2-navigations's main functionalities?

Accordion

The Accordion component allows you to create collapsible sections of content. Each section can be expanded or collapsed, making it useful for organizing large amounts of information in a compact space.

const { Accordion } = require('@syncfusion/ej2-navigations');

let accordion = new Accordion({
  items: [
    { header: 'Section 1', content: 'Content 1' },
    { header: 'Section 2', content: 'Content 2' },
    { header: 'Section 3', content: 'Content 3' }
  ]
});
accordion.appendTo('#accordion');

Tabs

The Tabs component allows you to create tabbed interfaces, where each tab can contain different content. This is useful for organizing content into different sections that can be easily navigated by the user.

const { Tab } = require('@syncfusion/ej2-navigations');

let tab = new Tab({
  items: [
    { header: { text: 'Tab 1' }, content: 'Content 1' },
    { header: { text: 'Tab 2' }, content: 'Content 2' },
    { header: { text: 'Tab 3' }, content: 'Content 3' }
  ]
});
tab.appendTo('#tab');

Toolbar

The Toolbar component allows you to create a set of command buttons that can be used to perform various actions. This is useful for providing quick access to frequently used functions in your application.

const { Toolbar } = require('@syncfusion/ej2-navigations');

let toolbar = new Toolbar({
  items: [
    { prefixIcon: 'e-cut-icon', tooltipText: 'Cut' },
    { prefixIcon: 'e-copy-icon', tooltipText: 'Copy' },
    { prefixIcon: 'e-paste-icon', tooltipText: 'Paste' }
  ]
});
toolbar.appendTo('#toolbar');

Menu

The Menu component allows you to create hierarchical menus with multiple levels of items. This is useful for organizing navigation links or commands in a structured manner.

const { Menu } = require('@syncfusion/ej2-navigations');

let menu = new Menu({
  items: [
    { text: 'File', items: [{ text: 'Open' }, { text: 'Save' }] },
    { text: 'Edit', items: [{ text: 'Cut' }, { text: 'Copy' }, { text: 'Paste' }] }
  ]
});
menu.appendTo('#menu');

Other packages similar to @syncfusion/ej2-navigations

primeng

PrimeNG is a collection of rich UI components for Angular. It offers a wide range of navigation components such as menus, tabs, and toolbars, similar to @syncfusion/ej2-navigations. PrimeNG is known for its extensive set of features and ease of use.

material-ui

Material-UI is a popular React UI framework that implements Google's Material Design. It includes a variety of navigation components like tabs, menus, and toolbars. Material-UI is widely used for its comprehensive documentation and community support.

antd

Ant Design is a React UI library that provides a set of high-quality components, including navigation components like menus, tabs, and toolbars. It is known for its elegant design and extensive customization options.

README

Overview

Displays a group of command buttons arranged horizontally.It comes with full support and is available under commercial and community licenses – please visit www.syncfusion.com to get started.

Resources

• Demos

Changelog

Check the changelog here