multiple levels vertical menus with nested submenu lwc -- w3web.net

Display lightning vertical navigation on-select event handler to retrieve the multiple levels of selected menus with nested submenu items Uses of ‘lightning-tree’ element in Salesforce lightning web component — LWC | How to display selected menus with nested sub-menu value in lwc

Hey guys, today in this post we are going to learn about How to Display lightning vertical navigation on-select event handler to retrieve the multiple levels of selected menus with nested submenu items in Salesforce lightning web component — LWC .

This component inherits styling from trees in the Lightning Design System.

A lightning-tree component displays visualization of a structural hierarchy, such as a sitemap for a website or a role hierarchy in an organization. Items are displayed as hyperlinks and items in the hierarchy can be nested. Items with nested items are also known as branches.

Here we are creating a tree and passing in an array of key-value pairs to the items attribute. To know more, click here.

Files we used in this post example

mulipleLevelsMenuLwc.html LWc HTML File Template HTML file to create muliple levels of selected menus with nested submenu items in lwc
mulipleLevelsMenuLwc.js LWC JavaScript File It’s hold a javascript on click function to display the selected menus with nested submenu using ‘lightning-tree’ element lwc.
mulipleLevelsMenuLwc.js-meta.xml XML Meta File It is used to where this lightning web component file you want to display as like lightning__AppPage, lightning__RecordPage, lightning__HomePage.
mulipleLevelsMenuLwc.css Style CSs It is used for fill the background color in the main element box.

Final Output

multiple levels vertical menus with nested submenu lwc -- w3web.net

Other related post that would you like to learn in LWC

  • Find the below steps

Create Lightning Web Component HTML

Step 1:- Create Lightning Web Component HTML ➡ mulipleLevelsMenuLwc.html

SFDX:Lightning Web Component ➡ New ➡ mulipleLevelsMenuLwc.html

mulipleLevelsMenuLwc.html [Lightning Web Component HTML]

Create Lightning Web Component Javascript

Step 2:- Create Lightning Web Component Javascript ➡ mulipleLevelsMenuLwc.js

SFDX:Lightning Web Component ➡ New ➡ mulipleLevelsMenuLwc.js

mulipleLevelsMenuLwc.js [LWC JavaScript File]

Create Lightning Web Component Meta XML

Step 3:- Create Lightning Web Component Meta XML ➡ mulipleLevelsMenuLwc.js-meta.xml

SFDX:Lightning Web Component ➡ New >> mulipleLevelsMenuLwc.js-meta.xml

mulipleLevelsMenuLwc.js-meta.xml [LWC Meta Data XML]

Create Lightning Web Component Style CSS

Step 4:- Create Lightning Web Component Style CSS ➡ mulipleLevelsMenuLwc.css

SFDX:Lightning Web Component ➡ New ➡ mulipleLevelsMenuLwc.css

mulipleLevelsMenuLwc.css [Style CSS]

Create Lightning Application

Step 5:- Create Lightning Application ➡ mulipleLevelsMenuLwcApp.app

From Developer Console ➡ File ➡ New ➡ Lightning Application

mulipleLevelsMenuLwcApp.app [Lightning Application File]

multiple levels vertical menus with nested submenu lwc -- w3web.net

Further post that would you like to learn in LWC

Related Topics | You May Also Like

Hi, This is Vijay behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time.

7 thoughts on “Display lightning vertical navigation on-select event handler to retrieve the multiple levels of selected menus with nested submenu items Uses of ‘lightning-tree’ element in Salesforce lightning web component — LWC | How to display selected menus with nested sub-menu value in lwc”

Leave a Comment