Styling navigation tabs with Bootstrap 4, for example on node page:
Replace scriptun with your theme name and override needed file in your theme. For main list we need additional nav and nav-tabs classes:
{# /themes/scriptun/templates/navigation/menu-local-tasks.html.twig #}
{#
/**
* @file
* Theme override to display primary and secondary local tasks.
*
* Available variables:
* - primary: HTML list items representing primary tasks.
* - secondary: HTML list items representing primary tasks.
*
* Each item in these variables (primary and secondary) can be individually
* themed in menu-local-task.html.twig.
*/
#}
{% if primary %}
<div class="container">
<h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
<ul class="nav nav-tabs nav-tabs-admin">{{ primary }}</ul>
</div>
{% endif %}
{% if secondary %}
<div class="container">
<h2 class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
<ul>{{ secondary }}</ul>
</div>
{% endif %}
Every list element in tabs need additional class nav-item:
{# /themes/scriptun/templates/navigation/menu-local-task.html.twig #}
{#
/**
* @file
* Theme override for a local task link.
*
* Available variables:
* - attributes: HTML attributes for the wrapper element.
* - is_active: Whether the task item is an active tab.
* - link: A rendered link element.
*
* Note: This template renders the content for each task item in
* menu-local-tasks.html.twig.
*
* @see template_preprocess_menu_local_task()
*/
#}
<li{{ attributes.addClass('nav-item') }}>{{ link }}</li>
Links also need additional class nav-link and active instead of default is-active:
// /themes/scriptun/scriptun.theme
function scriptun_preprocess_menu_local_task(&$variables) {
$class = array('nav-link');
if($variables['element']["#active"])
{
$class[] = 'active';
}
$variables['element']['#link']['url']->setOption('attributes', array('class' => $class));
}
Now you should see Bootstrap styled tabs on every page with local tasks (node page, user page).
Add new comment
Comments
Pita
Thanks for posting! Just what I was looking for :)
Scriptun
Viktor
It is very helpful article. Could you also move theming logic in the template?
Scriptun
Thanks. Moving logic to theme? All in twig template!? I don't think it's possible. You need to change active class behavior and it's not possible in twig file. There is only "link" variable available with whole <a> element. Workaround can be to define styles for is-active class instead of using default bootstrap .active
George
Thank you very much for this post. Very helpful.