Magento 2.1 – How to Add New Block with Links to Header Content

headermagento-2.1xml

example

What is the correct way to add block with some links and few css classes to header content?
This is correct?

    <referenceContainer name="header-wrapper">
        <container name="header.decor" as="headerDecor" label="Header Decor" htmlTag="div" htmlClass="header-decor">
            <block class="Magento\Framework\View\Element\Html\Link" htmlClass="link-1" name="link-1">
                <arguments>
                    <argument name="css_class" xsi:type="string">link-1</argument>
                    <argument name="path" xsi:type="string">link-1</argument>
                </arguments>
            </block>
            <block class="Magento\Framework\View\Element\Html\Link" htmlClass="link-2" name="link-2">
                <arguments>
                    <argument name="css_class" xsi:type="string">link-2</argument>
                    <argument name="path" xsi:type="string">link-2</argument>
                </arguments>
            </block>
        </container>
    </referenceContainer>

But no class…

Best Answer

In you "own theme" under Magento_Theme/layout/default.xml, add the following content.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header-wrapper">
            <block class="Magento\Framework\View\Element\Template" name="top.custom.links" as="topCustomLinks" template="Magento_Theme::topCustomLinks.phtml" />
        </referenceContainer>
    </body>
</page>

And add the HTML content inside your_theme/Magento_Theme/templates/topCustomLinks.phtml

<ul>
  <li id="link1">Link 1</li>
  <li id="link2">Link 2</li>
  <li id="link3">Link 3</li>
</ul>
Related Topic