How do I add pages and links to the main menu in Magento 2 ?


You can do this with an Observer on the top_menu_before event. I only included the two files that do the heavy lifting, but that is because I assume that you know how to Create a Module


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Event/etc/events.xsd">
  <event name="page_block_html_topmenu_gethtml_before">
    <observer name="vendor_menu_observer" instance="Vendor\Menu\Observer\TopmenuBefore" />


namespace Vendor\Menu\Observer;
use Magento\Framework\Event\Observer as EventObserver;
use Magento\Framework\Data\Tree\Node;
use Magento\Framework\Event\ObserverInterface;

class TopmenuBefore implements ObserverInterface {

     * @param \Magento\Framework\Registry $registry
        public function __construct() {}

     * @param EventObserver $observer
     * @return $this
        public function execute(EventObserver $observer) {
                /** @var \Magento\Framework\Data\Tree\Node $menu */
                $menu = $observer->getMenu();
                $tree = $menu->getTree();

                $data = [
                        'name' => __('Name to Display'),
                        'id' => 'identifier-for-later-use',
                        'url' => '/path-to-page',
                        'is_active' => 0 // if you want to add an 'active' css-class, use 1 

                $node = new Node($data, 'id', $tree, $menu);

                return $this;
  • Does this pull all CMS pages? I'm not very versed on how the functions work, but I don't see any loop. – Jason Sep 11 '18 at 0:48
  • @Jason This pulls a cms_block with identifier = the id node, and links to the url node, with the title from the name node, all defined in the $data array. It is only one, but you can easily copy the code a second time to add more than one menu-item. Hope that helps! – mtr.web Sep 11 '18 at 14:01
  • Actually, thanks for clarifying that part about adding extra links. As of right now, I was able to simply create a cms-block and insert into the nav through the default.xml file. Unfortunately my links placed into the nav in this manner are directing to url.com/undefined. ONLY the links placed in the cms block and only in the mobile menu. – Jason Sep 11 '18 at 19:39

I developed a FOSS module that allows to set redirects for categories.

This steps were taken:

  • Add an attribute redirect_url
  • If set, replace the category URL with that URL
  • Hook into is-active logic to mark the right menu entry as active

The module can be found on github


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.