How do I add classes to main menu ul and li in Drupal 8

最新推荐文章于 2018-05-18 01:01:00 发布

for023

最新推荐文章于 2018-05-18 01:01:00 发布

阅读量1.1k

点赞数

分类专栏： Drupal8 Drupal

Drupal 同时被 2 个专栏收录

41 篇文章

订阅专栏

Drupal8

12 篇文章

订阅专栏

1 down vote favorite

I want to generate the html elements and their classes to fit my styling of the main menu.

I'm confused by all the near-possibilities offered in the api documentation and by looking at core themes etc. and still can't quite see what I have to do, or where I have to do it.
I would be very grateful for clear pointers to:

which php functions I have to write;
which variables I need to add / update;
in which files the functions will go.

Presumably, in MYTHEME.theme I will need a preprocess function of some sort to add to the attributes and item.attributes variables that links.html.twig uses to print the menu ul and the menu item li's.

[Update] So far I have discovered one way to place classes on the Main Menu's ul but ideally I would like to add a class to each submenu's ul indicating the depth of the sub-menu.
And I cannot locate any documentation or examples from which I can understand the generation / modifying of the main menu's individual link items.

This function goes into the file MYTHEME.theme.

function MYTHEME_preprocess_page(&$variables) {

  // Pass the main menu and secondary menu to the template as render arrays.
  if (!empty($variables['main_menu'])) {
    $variables['main_menu']['#attributes']['id'] = 'main-menu-links';
    $variables['main_menu']['#attributes']['class'] = array('links', 'clearfix', 'MYNEW_class');
  }

}

edited Jul 11 '14 at 15:47

asked Jul 11 '14 at 12:55

iainH
237 1 2 12

You possibly want to wait for drupal.org/node/2256521 to land, that's a huge refactoring of the whole menu link system and it's likely that it will affect whatever you're currently doing. – Berdir Jul 11 '14 at 20:50

Thanks @Bedir. It looks like a mighty meaty refactoring! I'll keep the question open and aim to answer it when the new code hits an available alpha and I've had a chance to look at it. – iainH Jul 12 '14 at 15:43

add a comment

2 Answers

active oldest votes

up vote 1 down vote

Override the twig file for the main menu by saving menu--main.html.twig to your theme. Copy the original menu.html.twig from /core/modules/system/templates/menu.html.twig or /core/themes/classy/templates/navigation/menu.html.twig if your theme extends from Classy.

You can then modify the Twig macro used to generate the menu output. To get a class on the ul's to indicate level, you could do this:

{% if menu_level == 0 %}
  <ul{{ attributes.addClass('menu', 'menu-level--' ~ menu_level) }}>
{% else %}
  <ul class="menu {{ 'menu-level--' ~ menu_level }}">
{% endif %}

You could do similar manipulations to the li's:

<li{{ item.attributes }}>

Just tack on .addClass('class-name') to attributes like so:

<li{{ item.attributes.addClass('class-name') }}>

If you're a HTML/class name snob like myself you can also remove classes like so: {{ item.attributes.removeClass('menu-item') }}

Which I did on the line above the li in the for loop.

edited 20 hours ago

Cottser
601 3 8

answered 2 days ago

wesruv
146 4

Nice answer @wesruv, I made some edits (pending) to try to answer the OP more directly on adding a class to indicate depth. Thanks! – Cottser 20 hours ago

add a comment

up vote 0 down vote

The way to get the main menu with items in all levels has been resolved in Drupal 8 - "Implement menu links as plugins", trying to build a menu tree

To add class to ul and li, we got 3 options:

A. Override menuTree service:

create new MenulinkTree in your module MyprojectMenuLinkTree that extends core's MenuLinkTree
Override MenulinkTree::build by adding MyprojectMenuLinkTree::build
Update your level specifi class in logic like thishttps://gist.github.com/vijaycs85/308d2d0287a9ab1cd168
ovrride defult menu.link_tree at sites/default/services.ymlhttps://gist.github.com/vijaycs85/1179c6009c6932405f10

P.S: Not very sure, if you need to do these whole override for adding class.

B. Override just tree build on theme layer: