Magento 2.0.18 is the final 2.0.x release. After March 2018, Magento 2.0.x will no longer receive security patches, quality fixes, or documentation updates. To maintain your site's performance, security, and PCI compliance, upgrade to the latest version of Magento.
Customizing layout illustration
What's in this topic
This article features a step-by-step illustration of how a real-life layout customization task is performed. Namely, it illustrates how to change the layout of customer account links in a Magento store page header.
Moving customer account links
In their Orange theme, OrangeCo wants to transform the header links block to a drop-down, the way it is done in the Magento Luma theme:
To do this, they need to wrap the list of header links with a container and add a greeting with a drop-down arrow before the list.
The Orange themeinherits from Blank, so by default the rendered header links markup in Orange looks like following:
OrangeCo needs to create a new block, say, header.links, in the header.panel container, to move the links there. As the links can be added to this list by different modules, it is better to add this block to the default.xml page configuration of the Magento_Thememodule.
So the following extending layout is added in the Orange theme: