Contrib.social

[5.0.x] Add a JS toggle mechanism to nav_item component

Open on Drupal.org →
Created on 24 January 2024, 5 months ago
Updated 12 February 2024, 4 months ago

Problem/Motivation

The javascript tab mechanism is not managed by the nav_item component.

We need to provide a way to make this mechanism easily usable.

Proposed resolution

A new prop:

    toggle:
      type: machine_name
      label: Toggle
      description: "The HTML ID of the pane to activate"

And some additions to the pattern-nav-item.html.twig template:

 <li{{ attributes.addClass('nav-item') }}>
   {% set link = active ? link|add_class('active') : link %}
   {% set link = disabled ? link|add_class('disabled') : link %}
+  {% set link = toggle ? link|set_attribute('role', 'tab')|set_attribute('data-bs-toggle', 'tab') : link %}
+  {% set link = toggle ? link|set_attribute('aria-controls', toogle)|set_attribute('data-bs-target', '#' ~ toggle) : link %}
+  {% set link = toggle and active ? link|set_attribute('aria-selected', 'true') : link %}
   {{ link|add_class('nav-link') }}
 </li>

API changes

Nothing breaking. Because we don't alter the current behaviour.

✨ Feature request
Status

Fixed

Version

5.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024