In this post we will see that how to add lightning component on salesforce1 navigation menu/custom tabs.

Prerequisites : basic understanding of Lightning Component.

Permission to User : Customize Application

Step 1 : Create lightning component.

• first we create a basic lightning component with force:appHostable implement.

component [hello.cmp]

• implements=”force:appHostable”  interface make the component available in custom lightning component tabs.

Step 2 : Create lightning component tab.

• First click on setup –> in the Quick find box type Tabs –> select tabs in the Build-create section

• after click on tabs, Custom Tabs page will be displayed
• scroll down the page and go to Lightning component tabs and click on the new button

• after click on new button, select your Lightning Component from drop-down menu.
• Enter Tab Label which is displayed on salesforce1 navigation menu.
• click on Tab Name, its auto-populate from Tab label.
•  select a Tab Style icon which is displayed with label name.
• enter any Description for tabs (optional).
• click on next  button.
• click on save button.

your lightning component tab successfully created 🙂

Step 3 : Add component tab on Salesforce1 navigation menu

after created lightning component tab, now time to add tabs for salesforce1 navigation menu.

• click on setup –> in the Quick find box type Salesforce1 Navigation –> select Salesforce1 Navigation in the Administer section

after click on salesforce1 Navigation link Mobile Navigation page will be displayed.

Open your salesforce1 mobile app, and you can find your hello lightning component on there in the tabs

Like our facebook page for new post updates.? & Don’t forget to bookmark this site for your future reference.