Post Closed as "primarily opinion-based" by Pierre.Vriens, Adrian Cid Almaguer, Krishna Mohan, Shawn Conn, Yusef Mohamadi
3 improved title
| link

Best practice to alter the attributes variable in a Drupal 8 Twig template

2 added 1 character in body
source | link

I'm creating a custom Drupal 8 theme based on Bootstrap. (NOTE. I'm aware of https://www.drupal.org/project/bootstrap, I just want some practice.)

More often than not, I find myself adding Bootstrap classes to the existing Drupal classes via the Attribute object already available in the template.

For instance, in Bootstrap, the main navigation menu looks like this:

<ul class="nav navbar-nav">...</ul>

What is the best practice is to add the nav navbar-nav classes to Drupal's menu.html.twig template? This template already contains the following line:

<ul{{ attributes}}>

1) Add the classes viawith a preprocess function?

I could add the following function to my MYTHEME.theme file to alter the attributes variable before it's passed to the template:

function MYTHEME_preprocess_menu(&$variables) {
  if ($variables['menu_name'] == 'main') {
    $variables['attributes']['class'][] = 'nav';
    $variables['attributes']['class'][] = 'navbar-nav';
  }
}

2) Add the classes directly inside the Twig template?

First, I'd create a template named menu--main.html.twig to override only Drupal's main menu.

Then, I'd alter the line with the <ul> to:

<ul{{ attributes.addClass(['nav', 'navbar-nav']) }}>

I find #2 a little less clean but it keeps all the markup in the same place.

What do you think?

I'm creating a custom Drupal 8 theme based on Bootstrap. (NOTE. I'm aware of https://www.drupal.org/project/bootstrap, I just want some practice.)

More often than not, I find myself adding Bootstrap classes to the existing Drupal classes via the Attribute object already available in the template.

For instance, in Bootstrap, the main navigation menu looks like this:

<ul class="nav navbar-nav">...</ul>

What is the best practice is to add the nav navbar-nav classes to Drupal's menu.html.twig template? This template already contains the following line:

<ul{{ attributes}}>

1) Add the classes via a preprocess function?

I could add the following function to my MYTHEME.theme file to alter the attributes variable before it's passed to the template:

function MYTHEME_preprocess_menu(&$variables) {
  if ($variables['menu_name'] == 'main') {
    $variables['attributes']['class'][] = 'nav';
    $variables['attributes']['class'][] = 'navbar-nav';
  }
}

2) Add the classes directly inside the Twig template?

First, I'd create a template named menu--main.html.twig to override only Drupal's main menu.

Then, I'd alter the line with the <ul> to:

<ul{{ attributes.addClass(['nav', 'navbar-nav']) }}>

I find #2 a little less clean but it keeps all the markup in the same place.

What do you think?

I'm creating a custom Drupal 8 theme based on Bootstrap. (NOTE. I'm aware of https://www.drupal.org/project/bootstrap, I just want some practice.)

More often than not, I find myself adding Bootstrap classes to the existing Drupal classes via the Attribute object already available in the template.

For instance, in Bootstrap, the main navigation menu looks like this:

<ul class="nav navbar-nav">...</ul>

What is the best practice is to add the nav navbar-nav classes to Drupal's menu.html.twig template? This template already contains the following line:

<ul{{ attributes}}>

1) Add the classes with a preprocess function?

I could add the following function to my MYTHEME.theme file to alter the attributes variable before it's passed to the template:

function MYTHEME_preprocess_menu(&$variables) {
  if ($variables['menu_name'] == 'main') {
    $variables['attributes']['class'][] = 'nav';
    $variables['attributes']['class'][] = 'navbar-nav';
  }
}

2) Add the classes directly inside the Twig template?

First, I'd create a template named menu--main.html.twig to override only Drupal's main menu.

Then, I'd alter the line with the <ul> to:

<ul{{ attributes.addClass(['nav', 'navbar-nav']) }}>

I find #2 a little less clean but it keeps all the markup in the same place.

What do you think?

1
source | link

Best practice to alter attributes in a Drupal 8 Twig template

I'm creating a custom Drupal 8 theme based on Bootstrap. (NOTE. I'm aware of https://www.drupal.org/project/bootstrap, I just want some practice.)

More often than not, I find myself adding Bootstrap classes to the existing Drupal classes via the Attribute object already available in the template.

For instance, in Bootstrap, the main navigation menu looks like this:

<ul class="nav navbar-nav">...</ul>

What is the best practice is to add the nav navbar-nav classes to Drupal's menu.html.twig template? This template already contains the following line:

<ul{{ attributes}}>

1) Add the classes via a preprocess function?

I could add the following function to my MYTHEME.theme file to alter the attributes variable before it's passed to the template:

function MYTHEME_preprocess_menu(&$variables) {
  if ($variables['menu_name'] == 'main') {
    $variables['attributes']['class'][] = 'nav';
    $variables['attributes']['class'][] = 'navbar-nav';
  }
}

2) Add the classes directly inside the Twig template?

First, I'd create a template named menu--main.html.twig to override only Drupal's main menu.

Then, I'd alter the line with the <ul> to:

<ul{{ attributes.addClass(['nav', 'navbar-nav']) }}>

I find #2 a little less clean but it keeps all the markup in the same place.

What do you think?