Adding custom links to main navigation

[dzedward]

How do I add non-category links to the main navigation in a custom theme? I've tried adding the following to mytheme/Magento_Theme/layout/default.xml

<referenceBlock name="store.menu">
	<block class="Magento\Framework\View\Element\Html\Link">
		<arguments>
			<argument name="label" xsi:type="string">About Us</argument>
			<argument name="path" xsi:type="string">about-us</argument>
		</arguments>
	</block>
</referenceBlock>

But it doesn't show up.

[dzedward]

The element actually shows up in the source, it's just not inside the <nav> element, it's after it..

[fhennessy]

http://www.webmull.com/how-to-add-custom-top-links-in-magento-2-header/

https://sohelrana09.wordpress.com/2014/03/03/adding-links-to-top-menu-in-magento/

[thundering]

@dzedward, did you manged to figure this out? I'm stuck in the same situation and the links provided by @fhennessy are for the top menu not the main category menu.

[Jaime Stuardo]

The menu you are talking about is the navigation across product categories, and it is called "catalog.topnav". You cannot modify it, but you can create a container div that has all non-category options and modify the  "catalog.topnav" template (whose name is topmenu.phtml) to fit the design.

For example, what I have done to configure that menu is, modify default.xml in /app/design/frontend/MyBrand/MyTheme/Magento_Theme/layout,

 <container name="ul-menu-navegacion" htmlTag="ul" htmlClass="">
                                <block class="Desytec\Framework\View\Element\Html\MenuNavegacion" name="inicio">
                                    <arguments>
                                        <argument name="label" xsi:type="string">Inicio</argument>
                                        <argument name="path" xsi:type="string">/</argument>
                                        <argument name="icon" xsi:type="string">fa-home</argument>
                                    </arguments>
                                </block>
                                <block class="Desytec\Framework\View\Element\Html\MenuNavegacion" name="quienes-somos">
                                    <arguments>
                                        <argument name="label" xsi:type="string">Quienes Somos</argument>
                                        <argument name="path" xsi:type="string">quienes-somos</argument>
                                        <argument name="icon" xsi:type="string">fa-cube</argument>
                                    </arguments>
                                </block>
                                <block class="Desytec\Theme\Block\DepasaTopmenu" name="catalog.topnav" template="html/topmenu.phtml" ttl="3600"/>                                                   $
                                <block class="Desytec\Framework\View\Element\Html\MenuNavegacion" name="contacto">
                                    <arguments>
                                        <argument name="label" xsi:type="string">Contacto</argument>
                                        <argument name="path" xsi:type="string">contact</argument>
                                        <argument name="icon" xsi:type="string">fa-envelope</argument>
                                    </arguments>
                                </block>
                            </container>

As you can see, I haved added 2 options before the category menu and 1 option after it.

Since "catalog.topnav" is defined in other block, you may need to move it:

<move element="catalog.topnav" destination="ul-menu-navegacion" before="contacto" />

You can also see that the block for the new option is MenuNavegacion. That is only an override of class  \Magento\Framework\View\Element\Html\Link\Current  because I needed more customization of how the option behaves and looks.

Regards

Jaime

[eelias]

Hi guys, I was looking for the solution to this and I finally got it using a custom theme overriding the Magento_Theme topmenu template, check the solution here I 've tested :

https://linkstraffic.net/adding-custom-menu-item-inside-magento2/

[JUV_LANO]

@eelias that maybe a good solution but how to add the active class when you navigate to the page do you have any idea?