How to Create a CMS Page in Magento 2 and Add it’s Link to Top Navigation Menu

Home >> Blog >> Magento 2 >> How to Create a CMS Page in Magento 2 and Add it’s Link to Top Navigation Menu
How to Create a CMS Page in Magento 2 and Add it's Link to Top Navigation Menu

Magento 2 has been making its mark as the most successful platform for eCommerce since it has been upgraded from Magento 1 to magento 2 back in 2015. Along with the well-known businesses now small-sized businesses are also migrating their online stores to Magento2. The reason is Magento 2 provides a wide range of inbuilt functionalities, high scalability, security and continuous growth in development.

If you are already using Magento 2 platform for your ecommerce store website then you are certainly on the correct trend.

Whether you have built a custom store with the help of Magento 2 development company or if you have used any premade template to set up your website, you are always stuck with one requirement which comes across almost all of the eCommerce websites that is, How to create a CMS page and then add its link to top menu navigation?

Obviously there is a quick solution or rather a turnaround for this where you can just create a CMS Block->Add content in there from the page->Save and then in Products->Categories->Design tab->Select that Static block. With this you can show the content in category but cannot get the desired page content on the specific URL you want to use on your Magento eCommerce store.

But now you can put your own custom link in the main category navigation menu using the guide we have provided in this blog post

We have created a guide for you on how you can create a CMS page and then add its link to top navigation menuof your Magento 2 website with step by step detailed information.

Create a CMS Page

Let’s start with creating the CMS page you want to add in navigation top menu. Go to Admin -> Content -> Pages
Create a CMS Page

Click on Add New button to create a new page


Enter details of your new page and for example let’s say page name as “new page” and please note down the URL Key specified as “new-page”. Add the content for page and click on “Save Page”.


Add CMS Page link to Navigation Menu

Next step for this is that you have to do customization to your theme’s XML file which will let you add your own code to specific sections of your template.

Basically you can achieve this by editing your theme’s layout XML file but I would recommend creating a small custom code with extension so that your theme files stay intact which will help you with theme upgrades and all its support in future

Have a project in mind?

Lets talk about it

Request a Quote

First I’m going to define a Namespace as “Mageice” and ModuleName “NavigationLink” for my extension. Create a file named “default.xml” in Magento 2 root at location


Put below code in the created file:

Now you need to create the file which contains the name of your link and the URL key which was noted down while you created the page. Create a file named “Link.php” at below location from Magento 2 root.


Put below code in the created file with replacing ‘cms_page_url_key’ with your page URL Key ‘new-page’ and the page link name ‘Link_Name’ with ‘New Page’:

?php namespace Mageice\NavigationLink\Block\Links; class Link extends \Magento\Framework\View\Element\Html\Link { public function __construct( \Magento\Framework\View\Element\Template\Context $context, array $data = [] ) { parent::__construct($context, $data); } public function getHref(){ $page_url = 'cms_page_url_key'; return $this->getUrl($page_url); } public function getLabel(){ return 'Link_Name'; } } </pre> </div> <p>Save both the files and clear the cache and activate extension with below command on command line with SSH access to your Magento 2 server on Document Root directory.</p> <div class="marginleft-40"> <pre font-size="15px" line-height="17px" lang="php"> php bin/magento setup:upgrade php bin/magento static:content:deploy </pre> </div> <p>After both commands have successfully completed you can now open your website homepage and check that the link has been shown now on the Navigation Menu.</p> <p><img src="" alt="" width="604" height="305" class="alignnone size-full wp-image-3917" ?

That’s all i think . Please feel free to contact our Magento 2 developers if you need any more customization done on your magento 2 web store to achieve your unique business goals


Bhavin M

Bhavin M, co-founder of Icecube Digital, spends much of his time creating simple but valuable content which helps ecommerce entrepreneurs to grow their online business.

Get Free Quote Now

Send us your project notes