To add Lightning Components to the Salesforce mobile application navigation, you need to make sure that Lightning Component implements the force:appHostable interface:

<aura:component implements="force:appHostable">

Let's add the YouTube search component we created to the Salesforce mobile application navigation menu. To do this, let's deploy the Lightning Component by using SFDX commands to push source code from the git repository at https://github.com/PacktPublishing/Learning-Salesforce-Lightning-Application-Development/tree/master/chapter12 to the scratch Org, as shown in the following code snippet:

# Authenticate to Dev Hub
sfdx force:auth:web:login -d -a DevHub

# Set as Default Devhub
sfdx force:config:set defaultdevhubusername=DevHub

# Create a scratch Org with alias testOrg
sfdx force:org:create -s -f config/project-scratch-def.json -a testOrg

# Set an existing scratch Org as default
sfdx force:config:set defaultusername=<username|alias>

# push code
sfdx force:source:push

# Open the scratch Org with alias 'testOrg' in browser
sfdx force:org:open -u testOrg

The next step is to create an app page using the lightning app builder and make sure that we have the YouTube search component added in, as shown in the following screenshot. The app builder can be found using the setup menu:

Once you activate the Lightning Application page (the activation button is located in the top right of the builder page), navigate to Mobile Subsection, and make sure to add the app page to the navigation, as follows:

Alternatively, navigate to Setup | Mobile Apps | Salesforce | Navigation from the setup menu and add the YouTube search app page, as shown in the following screenshot:

To test the application, set your Chrome browser settings to view in device mode, as covered in the previous section, and you will see the component working in the Salesforce mobile application: