Here we will see how to create a navigation bar using spfx extension. So let’s see how we can achieve this.
md ext2
cd ext2
yo @ microsoft/sharepoint
What is your solution name?: ext2
Which type of client-side como you want to target for your component(s)? SharePoint Online only (latest)
Component to create?: Extension
What is your Application Customizer name? ext2
What is your Application Customizer description? ext description
After the scaffolding run the below command to install the office fabric ui:
npm install @microsoft/sp-office-ui-fabric-core
Then code.
Create a new file named ./src/extensions/ext2/AppCustomizer.module.scss.
Update AppCustomizer.module.scss as follows:


In the Ext2ApplicationCustomizer.ts


Update the serve.json file as
Update the package-solution.json file as
Update the elements.xml file as,
You can test the extension in the local workbench using command gulp serve.
For using in sharepoint please package the solution

Under the SharePoint folder find the ext-2.sppkg file. Here you can right click and then click on reveal in file explorer.

Upload the solution in the sharepoint app catalog. From the site content page add the solution. After the solution is added successfully, the extension will be visible in the modern page. If you do any enhancement in the solution please go to the package-solution.json file and update the version before uploading it to the Sharepoint app catalog.