cancel
Showing results for 
Search instead for 
Did you mean: 

Adding custom links to main navigation

Adding custom links to main navigation

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.

6 REPLIES

Re: Adding custom links to main navigation

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

 

Re: Adding custom links to main navigation

@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.

Re: Adding custom links to main navigation

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

Re: Adding custom links to main navigation

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/

Re: Adding custom links to main navigation

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