Adding a menu option

By using the differential approach, you can add a menu option in the navigation bar.

Procedure

Create a custom component.
Go to the <store-temp>/extensions/features/override-component/src/app/components directory and run the following command:
```
ng g c <componentName> --prefix=isf
```
Add the overrideComponent static string variable with the value as the component class name as illustrated.
```
.... public static overrideComponent = 'ExtnChangeLocaleComponent'; ....
```
Update the custom component class name by completing the following steps:
1. Go to the <store-temp>/extensions/features/override-component/src/app directory.
2. Open the app.module.ts file.
3. update the custom component class name in the customComponentDeclarations object.

Add a menu option configuration in <store-temp>/extensions/features/override-component/src/assets/override-component/config/isf-navbar-extn-config.json file as illustrated in the following sample configuration.

{

"menuTID" : "navBarMenuWidget_3",

"menuIconClass" : "app-icon-switch-locale_16",

"menuTitleBundleKey" :"navbar.ACTION_ChangeLocale",

"componentName": "ExtnChangeLocaleComponent"

 }

The following table describes the attributes of the menu configuration.

Table 1. Attributes for the menu configuration
Attributes	Description
menuTID	Specifies the unique identifier for the menu option that is displayed in the navigation bar. The valid values are `navBarMenuWidget_1` or`navBarMenuWidget_2`.
componentName	Specifies the component name that is loaded in the navigation bar. For example, `AlertsExtnComponent` or `GlobalSearchExtnComponent`.
menuIconClass	Name of the glyphicon class that must be used to display the appropriate icon for the menu option.
menuTitleBundleKey	Mandatory. The bundle key of the menu option.

For more information about adding an icon, see Adding custom images.
For more information about adding a bundle entry for menuTitleBundleKey, see Override the application-provided translation bundle JSON files.

Verify that your changes are reflected in the navigation bar.
To locally verify the extended application-provided navigation bar, start the application by running the following command:
```
yarn start-app
```