# Creating a custom navigation

Custom Navigation allows you to create and customize the navigation bar on your store. You can create a Dropdown, add links to pages or collections, and arrange the order and hierarchy of navigation items. It helps visitors easily navigate through your store and find the content they are looking for. The navigation is responsive, ensuring a consistent experience across different devices.

To create **Custom Navigation**

* Goto **Appearance**
    
* Click on **Components**
    
* Edit **Navigation** and select **Customized Navigation** as shown in the image below
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685359574825/59eb9637-d7da-486b-a3d2-11cd9c478fd9.png align="center")

* You will be automatically redirected to **Navigation Editor**
    
* From **Editor**, you can **ADD** a new navigation item or ADD a dropdown item as shown in the image below
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685359942524/d64e9474-f2b6-4a27-ab2f-39d4803bbcf4.png align="center")

* You can see **LIVE** how the navigation is looking and can also Drag and drop items to arrange them in the right order
    
* Whenever you click on the ***Goto*** field it will show you a popup with all the possible navigation options that you have for your website.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685360152820/5263f9e0-7105-46e1-8e5e-42713afa9297.png align="center")

Now save the changes and your website will have a custom navigation bar that you configured yourself.

If you like to edit the **Navigation** afterward then, you can just click on the **Settings** icon inside ***Appearance*** > ***Components*** > ***Navigation***

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685360789407/eef5ef37-a959-4008-83d6-48cf8a7b4ebe.png align="center")

Here are some examples of how it will look on a laptop vs mobile.

* For desktop/laptop
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685360318340/d3a54a7b-7274-4a57-83ac-5e9c6e66b0d6.png align="center")

* For mobiles
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685360368200/37ac3354-5179-46db-97f4-01d1b2303b6c.png align="center")

Upgrade your store to [**Blanxer Premium**](https://blanxer.com/) Plan to start using this feature today 😊