How to render Menu block in Drupal front end

Here we are discussing how to place menus blocks in twig templates regions and modules helps to customize it in Drupal 9 and Drupal 10.

By default in Drupal 9 & 10 you can place Menu block in twig region using block layout configuration as below with out any custom code or contributed module.

Basic Usage

By default we can place menu in desired region using place block button.

In our menus we have the below menu structure for About US menu.

We are going to display a menu in our primary menu region without the menu title About US.

Got to block layout page  /admin/structure/block. 

Click on Place block you could see all the available blocks listed. You can see the menu block About US that we created.

Click on place block  you could see all the configurations.

Unselect Display title. In Menu level keep visibility level 1 to show  the menu.

You can see your menu links  in primary menu region.

In menu level if you select Expand all menu links you can see child links in expanded form if you click on parent menu.

So you can see child menu links in expanded form if you click on it.

You can set visibility to decide where we need to display the menu block.

Below are visibility settings available in Menu block configurations.

Some of the major visibility settings are provided below.

You can decide in which pages menu block need to be shown by providing below configurations.

You restrict user roles who can see the menu block by providing below options, by default menu block will be shown to all user roles.

You can restrict menu block to specific content type using below visibility settings.

Using Menu Block module

Apart from default feature available in Drupal 9 and 10, you can install below Menu block module. This will provide additional features like customising html and style of menu and other advanced features.

https://www.drupal.org/project/menu_block  provides additional features in D8 & D9.

   Provides more enhanced features than the ones offered in the core Menu modules. You can easily configure blocks of menu links and specify the level you want to start and end with. Some of the features already ported to Drupal 9 and 10 Core.

After installation of Menu block module you could see below additional options 

In html and style option, we can see the options below.

We can override default html and css using a custom theme.

In advanced option you can see below options.

There are other ways to customize your menu’s or menu blocks, that we will discuss in next articles.