Magento – Editing header links in Magento 2

headermagento2toplinks

I'm on Magento 2.1, the header links are rendered with this structure:

<ul class="header links">
  <li>...</li>
  <li>...</li>
  ...
</ul>

I need to remove the class .header from <ul> tag and add another ones.

Also, I need to add some HTML inside <li> tags.

How can do it?

Best Answer

You can change css_class class "header links" by following

In default theme you can change or if you have specific theme you change there.

/vendor/magento/theme-frontend-luma/Magento_Theme/layout/default.xml

<referenceContainer name="header.panel">
    <block class="Magento\Framework\View\Element\Html\Links" name="header.links">
        <arguments>
            <argument name="css_class" xsi:type="string">header links</argument>
        </arguments>
    </block>
</referenceContainer>

If you want to add extra links ( Taken from customer module ). you can use below code in you layout by your block classes 

<referenceBlock name="top.links">
    <block class="Magento\Customer\Block\Account\Link" name="my-account-link">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">My Account</argument>
        </arguments>
    </block>
    <block class="Magento\Customer\Block\Account\RegisterLink" name="register-link">
        <arguments>
            <argument name="label" xsi:type="string" translate="true">Create an Account</argument>
        </arguments>
    </block>
    <block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link"
           template="account/link/authorization.phtml"/>
</referenceBlock>

Need to create block for href=""

/vendor/magento/module-customer/Block/Account/Link.php

public function getHref()
{
    return "http://example.com/";
}

You can add html by the referencing <referenceContainer name="header.panel">

I have added code from core modules for reference. recommended to override by creating new module.

Hope this helps.

Related Topic