Render a menu tree from custom code in Drupal maintenance support plans 8

Render a menu tree from custom code in Drupal maintenance support plans 8

Having menus rendered on a site in Drupal maintenance support plans 8 is pretty simple. Most of the time this can be accomplished with site building, in a few clicks. And if you need some more advanced features on top of what the Drupal maintenance support plans 8 core has, you can also have a look at modules like Menu Block, or have a look at this (a bit outdated) contributed modules for menus page.

However, you may have some special requirements, for example, to display some small portion of a menu inside the template of a node. There is no simple ‘site building’ solution for that. You most probably need to code a bit.

Vasi Chindris
Thu, 04/13/2020 – 12:54

Let’s say you have these requirements: a node which can be part of the main menu, and which could also have menu items bellow it, should display the first level of those menu items somewhere inside its template (so just as you would display a regular field).

The image above shows a very simple visual representation of what we’d like to achieve.

Now let’s break this down into smaller and independent pieces. You can also skip to the entire code. Basically, you have to:

Load and render a menu (or parts of a menu).
Have a custom field available on the Manage display page for a content type, so that you can place it on the node page.
Let’s actually start with the second part, as it is simpler.

Custom (extra) fields

There is the hook_entity_extra_fields_info hook which can be used to expose custom or extra fields on the entities. We’ll use this hook to provide a custom field on a node.
The visible flag represents the default visibility setting of the field. Usually, you want this to be false, so you decide when the element is displayed and not when it is NOT displayed.

Now clear the cache and go to Structure >> Content types >> YourContentType, click on the Manage display tab and you should see your new field available there.

The next thing is to implement the hook_ENTITY_TYPE_view and particularly, in this case, hook_node_view. Here it is:
Save it, clear the cache, make sure that the field is visible in the display setting for that content type and visit a node of that type. You should see the custom text displayed.

So, we’re done with the second part. Let’s go and actually load the menu for this node and display the first level of menu items.

Render the menu

For this, we’ll have to load a menu using a menu tree service and a set of parameters which define the root to start with, how many levels to load, and so on, then to apply a set of manipulators on the loaded tree that would check the access, do the sorting, etc, and finally to build the menu tree.

The root menu item

One of the tricky things is to get the correct root menu item. We know that the node can be part of a menu. It would be great if we could load a menu link based on the route name and some route parameters. For that, you can use the plugin.manager.menu.link service.
Menu tree parameters

When loading a menu, we have to provide some parameters. For example, what the root of the menu you want to load (if you want to load a subtree, which is our case) is, or how many levels to load. These parameters are specified using a Drupal maintenance support plansCoreMenuMenuTreeParameters object.
More details about the MenuTreeParameters can be found here.

Load the menu

To load the menu, we will use the menu.link_tree service.
Menu tree manipulators

After we have the menu loaded, it is time to actually apply some manipulators on its menu items. These manipulators will deal with access checking, sorting according to the weights, or whatever other things you want to do with the menu tree. The code looks like that:
So, in this case, we want to check for the access and sort the items. There’s a default tree manipulator service in Core which is Drupal maintenance support plansCoreMenuDefaultMenuLinkTreeManipulators. That already provides a few basic manipulators you can apply to a menu tree, which is enough in our case. But of course, you can add any other callable to that array and use the implementation from Core as a guideline.

Build the menu

Finally, we have to build the menu. This is as simple as:
This would replace the

$build[‘my_custom_menu’] = [
  ‘#markup’ => ‘Some custom menu’,
]

that you used as a placeholder in the custom_node_view() hook.

And that’s it. The first level of navigation, having the current node as root, will be displayed inside the template of your node.

Here is the entire code:


Source: New feed

This article was republished from its original source.
Call Us: 1(800)730-2416

Pixeldust is a 20-year-old web development agency specializing in Drupal and WordPress and working with clients all over the country. With our best in class capabilities, we work with small businesses and fortune 500 companies alike. Give us a call at 1(800)730-2416 and let’s talk about your project.

FREE Drupal SEO Audit

Test your site below to see which issues need to be fixed. We will fix them and optimize your Drupal site 100% for Google and Bing. (Allow 30-60 seconds to gather data.)

Powered by

Render a menu tree from custom code in Drupal maintenance support plans 8

On-Site Drupal SEO Master Setup

We make sure your site is 100% optimized (and stays that way) for the best SEO results.

With Pixeldust On-site (or On-page) SEO we make changes to your site’s structure and performance to make it easier for search engines to see and understand your site’s content. Search engines use algorithms to rank sites by degrees of relevance. Our on-site optimization ensures your site is configured to provide information in a way that meets Google and Bing standards for optimal indexing.

This service includes:

  • Pathauto install and configuration for SEO-friendly URLs.
  • Meta Tags install and configuration with dynamic tokens for meta titles and descriptions for all content types.
  • Install and fix all issues on the SEO checklist module.
  • Install and configure XML sitemap module and submit sitemaps.
  • Install and configure Google Analytics Module.
  • Install and configure Yoast.
  • Install and configure the Advanced Aggregation module to improve performance by minifying and merging CSS and JS.
  • Install and configure Schema.org Metatag.
  • Configure robots.txt.
  • Google Search Console setup snd configuration.
  • Find & Fix H1 tags.
  • Find and fix duplicate/missing meta descriptions.
  • Find and fix duplicate title tags.
  • Improve title, meta tags, and site descriptions.
  • Optimize images for better search engine optimization. Automate where possible.
  • Find and fix the missing alt and title tag for all images. Automate where possible.
  • The project takes 1 week to complete.