Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (22)Angular  (38)ASP.NET  (47)ASP.NET Core  (52)ASP.NET MVC  (83)Azure  (26)Blazor  (44)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (46)JavaScript  (133)Microsoft  (96)PDF  (47)React  (29)Succinctly series  (118)Syncfusion  (382)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (13)Windows Forms  (52)WPF  (85)Xamarin  (104)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (97)Chart  (38)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (27)Development  (232)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (4)Essential Tools  (14)Excel  (11)Extensions  (6)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (133)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (1)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (13)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (3)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (8)Tips and Tricks  (12)UI  (55)Uncategorized  (68)Unix  (2)User interface  (42)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (6)Web  (84)What's new  (53)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Top 5 Features of React Menu

Top 5 Features of React Menu Bar

The React Menu Bar is a graphical user interface component that serves as a navigation header for your web application. It supports data binding, templates, icons, navigation, a hamburger menu, multilevel nesting, and orientation features. It can be populated using an array of JavaScript objects. In this blog, I am going to walk you through five major features of the Menu Bar control:

Data binding

The React Menu component provides options to load data either from local data sources or from remote data services. This can be done through the items property, which accepts an array of JavaScript objects, and the fields property, which is used to map the items property.

The component supports the following types of data bindings:

JSON data

The React Menu Bar can generate menu items through an array of objects by mapping fields from the fields property.

Hierarchical Data

The React Menu can be populated with a hierarchical data source that contains a nested array of JSON objects. You can directly assign hierarchical data to the items property, and map all the field members with corresponding keys from the hierarchical data to the fields property.

The following code example showcases the model of a hierarchical data source.

The rendering is done using the following code.

The following GIF image showcases hierarchical data binding in the React Menu Bar.Hierarchichal Data Binding in React Menu

Self-referential data

The Menu Bar can be populated from a self-referential data structure that contains an array of JSON objects with parentId mapping. You can directly assign self-referential data to the items property, and map all the field members with corresponding keys from self-referential data to the fields property. To render the root-level nodes, specify the parentId as null, or just skip specifying the parentId in items. In the following example, the idpId, and text columns from self-referential data have been mapped to the itemIdparentId, and text fields, respectively.

The following code example showcases the model of a hierarchical data source.

And the rendering is done as follows.

The following GIF image showcases hierarchical data binding in the Menu Bar.Self Referential Data Binding in React Menu

Data service

The React Menu Bar can be populated using remote data as a data service. You can achieve this by using the DataManager. The items property has been assigned with the resultant data in the callback function.

And the rendering is done using the following code.

Orientation

The React Menu Bar supports two types of orientation that are used to specify the direction in which a menu is to be rendered. The types of orientations are:

  • Portrait (vertical)
  • Landscape (horizontal)

Vertical orientation

The React Menu Bar can also be rendered vertically by setting the orientation property. You can use this for web applications that need to display the items as a side panel.

The following animation showcases a vertical menu.Vertical Orientation in React Menu

Horizontal orientation

Horizontal orientation displays the menu items horizontally and is the default orientation. You can use this for web applications that need to display items as a header.

Icons and navigation

The React Menu Bar supports icons and navigation in the header menu items as well as submenu items.

Icons

Each menu item can contain an icon or image in it to provide a visual representation of an action. To place an icon on a menu item, set the iconCss property with the required icon CSS. By default, the icon is positioned at the left of the menu item.

You can refer to the following link to view the available icons and their codes:

https://ej2.syncfusion.com/react/documentation/appearance/icons/?no-cache=1

Navigation

The React Menu Bar can be used to navigate from one page to another webpage when a menu item is clicked. This can be achieved by providing a link to the menu item using the url property. You can add this navigation in header menus and submenus by using the url property.

Hamburger menu

The hamburger menu or hamburger icon is the name given to the menu icon found on websites that hides the traditional file menu. This is alternatively referred to as the hotdog menu or three-line menu. Using a hamburger menu makes it easier to view program options on mobile devices. You can enable this option using the hamburgerMode property. You can use the showItemOnClick property to open the menu when the hamburger is clicked.

You can create two types of hamburger menus with the help of the orientation property. They are:

  • Horizontal hamburger menu
  • Vertical hamburger menu

Horizontal hamburger menu

This menu is also called a three-line menu, and it is very suitable for mobile-oriented applications since it occupies a small space and is displayed only in the header.Horizontal hamburger React menu

Vertical hamburger menu

This menu is just like the horizontal hamburger menu, but it opens the submenu downward instead of popping up to the right side of the button.

The following GIF image showcases a vertical hamburger menu.Vertical hamburger React menu

Template

To provide flexibility, the React Menu Bar component offers template support. You can render a custom user interface to display menu items using the template property. A template can include a mixture of static HTML and web controls. You can customize the menu using two kinds of templates:

  • Header template to customize the menu header element.
  • Item template to customize the menu item element.

The following code example showcases templating with header and item customization.

The template code follows.

The rendering code is as follows.

The following GIF image showcases templates in the Menu Bar.Templates in React Menu

Conclusion

I hope you now have a better understanding of the major features supported by the React Menu Bar control.

What else do you expect from a list box? Please share your thoughts in the comments section below.

If you’re already a Syncfusion user, you can download the product setup to try out this control. Otherwise, you can download a free 30-day trial.

If you have any questions about these features, please contact us through our support forumDirect-Trac, or Feedback Portal. We are happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top