Well, if you have a look at the default template for catalog.topnav
block you can see that it's setup to render any child block after the menu:
<nav class="navigation" data-action="navigation">
<ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
<?= /* @escapeNotVerified */ $_menu ?>
<?= /* @escapeNotVerified */ $block->getChildHtml() /* THIS IS WHAT RENDERS YOUR BLOCKS */ ?>
</ul>
</nav>
Your blocks use the Magento\Framework\View\Element\Html\Link\Current
which is fine to render a single link but doesn't really let you have multiple "child links".
Solution #1
So you have a few options here, probably the easiest one would be set a template to your custom blocks and set the markup for your links there:
Layout
<block class="Magento\Framework\View\Element\Html\Link\Current" name="Shoes">
<arguments>
<argument name="label" xsi:type="string">Shoes</argument>
<argument name="path" xsi:type="string">shoes</argument>
<argument name="template" xsi:type="string">Magento_Theme::menu/shoes.phtml</argument>
</arguments>
</block>
Magento_Theme/templates/menu/shoes.phtml
<li class="level0 nav-5 level-top parent">
<a href="/shoes.html" class="level-top"><span>Shoes</span></a>
<!-- YOUR SUBMENU -->
<ul class="level0 submenu">
<li class="level1 nav-5-1 first last">
<a href="/shoes/high-heels.html"><span>High Heels</span></a>
</li>
</ul>
</li>
Solution #2
Now if you want to keep a similar flexibility as the one you have for the top level items you could create a new Block class that extends the Current
class you're already using and add support for multiple submenu items by extending the _toHtml
function:
Vendor\Submenu\Block\Element\Html
class LinkWithSubmenu extends \Magento\Framework\View\Element\Html\Link\Current
{
/**
* Render block HTML
*
* @return string
*/
protected function _toHtml()
{
if (false != $this->getTemplate()) {
return parent::_toHtml();
}
$submenu = '';
if ($this->getSubmenu() && !empty($this->getSubmenu())) {
$submenu = '<ul>';
foreach ($this->getSubmenu() as $link) {
$submenu .= '<li class="">';
$submenu .= '<a href="' . $this->escapeHtml($this->getUrl($link['path'])) . '">';
$submenu .= $this->escapeHtml((string)new \Magento\Framework\Phrase($link['label']));;
$submenu .= '</a></li>';
}
$submenu .= '</ul>';
}
$highlight = '';
if ($this->getIsHighlighted()) {
$highlight = ' current';
}
if ($this->isCurrent()) {
$html = '<li class="nav item current">';
$html .= '<strong>'
. $this->escapeHtml((string)new \Magento\Framework\Phrase($this->getLabel()))
. '</strong>';
$html .= $submenu;
$html .= '</li>';
} else {
$html = '<li class="nav item' . $highlight . '"><a href="' . $this->escapeHtml($this->getHref()) . '"';
$html .= $this->getTitle()
? ' title="' . $this->escapeHtml((string)new \Magento\Framework\Phrase($this->getTitle())) . '"'
: '';
$html .= $this->getAttributesHtml() . '>';
if ($this->getIsHighlighted()) {
$html .= '<strong>';
}
$html .= $this->escapeHtml((string)new \Magento\Framework\Phrase($this->getLabel()));
if ($this->getIsHighlighted()) {
$html .= '</strong>';
}
$html .= '</a>';
$html .= $submenu;
$html .= '</li>';
}
return $html;
}
}
Layout
<block class="Vendor\Submenu\Block\Element\Html\LinkWithSubmenu" name="Shoes">
<arguments>
<argument name="label" xsi:type="string">Shoes</argument>
<argument name="path" xsi:type="string">shoes</argument>
<argument name="submenu" xsi:type="array">
<item name="highHeels" xsi:type="array">
<item name="label" xsi:type="string">High Heels</item>
<item name="path" xsi:type="string">shoes/high-heels</item>
</item>
<item name="clogs" xsi:type="array">
<item name="label" xsi:type="string">Clogs</item>
<item name="path" xsi:type="string">shoes/clogs</item>
</item>
</argument>
</arguments>
</block>