The Menu block renders a classic WordPress navigation menu.
When using ska-theme, the legacy WordPress menus are once again enabled because the WordPress core Navigation block is still new, confusing and evolving, while everyone knows exactly how to edit a classic nav menu.
When not using ska-theme, you can re-enable navigation menus with this code:
add_theme_support('menus');The ska/menu block has an option to select one of these menus and render it in the editor. When you don’t have any menus yet, it can render a placeholder menu.
Enabling the Dropdown option will display child-items in dropdowns.
The menu uses a custom Walker and generates predictable markup ul > li > a and ul > li > ul.sub-menu.
ska-theme comes with a Dropdown preset that styles the individual dropdowns.
Dropdowns
Dropdown items are automatically created from the navigation menu structure. The items can be with the structure “parent -> child 1, child 2, child 3” as well as “parent -> child 1 -> child 2 -> child 3”.
Example menu with dropdowns
Dropdown columns
To achieve the columns demonstrated in the above menu under “Blog” item some additional classes need to be added to menu items.
To add classes to menu items ensure that the CSS Classes option is enabled under Screen Options in the top right corner of the screen when editing a classing WordPress navigation menu:
To create columns add the ska-columns class to the root item and ska-no-dropdown classes to its’ direct children:
Dropdown icon
To customize the dropdown icon a filter in your child theme’s functions.php can be used:
/**
* @param string $icon SVG or other HTML element to render.
* @param string $context_id Optional identifier of where the icon is being used (example: 'menu' | 'language-switcher').
* @param mixed $context Optional additional context, such as the `Ska_Blocks_Menu_Block` or `Ska_Blocks_Language_Switcher_Block` instance.
* @return string
*/
add_filter('ska_blocks_dropdown_icon', function($icon, $context_id, $context) {
if($context_id === 'menu') {
return '<svg class="dropdown-icon" ...';
}
return $icon;
}, 10, 3);