Add menu level classes to menu elements

Created on 27 March 2025, 9 days ago

Problem/Motivation

Only one menu element has a level class, so styling different levels requires specific CSS selectors, or overriding the entire menu template in the theme to add them. It would be nice to have preset level classes to make styling easier and to avoid using specific selectors.

Proposed resolution

Modify the disclosure-menu.html.twig file to add level classes to menu elements:

  • menu__item-container
  • menu__item-link--level
  • menu__submenu-item-link
  • menu__submenu-container
✨ Feature request
Status

Active

Version

2.1

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States hbrokmeier Wisconsin

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

Merge Requests

Comments & Activities

  • Issue created by @hbrokmeier
  • Merge request !183515811: Add level classes β†’ (Open) created by hbrokmeier
  • πŸ‡ΊπŸ‡ΈUnited States hbrokmeier Wisconsin

    See MR!18, I added level classes to these elements:

    • menu__submenu
    • menu__item-container
    • menu__item-link
    • menu__submenu-item-link
    • menu__submenu-toggle
    • menu__submenu-container
  • First commit to issue fork.
  • πŸ‡ΊπŸ‡ΈUnited States sonfd Portland, ME

    The MR adds the extra classes, but I am finding it confusing that that we're using menu__item-* and menu__submenu-item-* classes. I think we'd be better off with just menu__item-* menu__item-*--level-X classes on all levels but I think that could break some existing styles out there.

    Leaving this unresolved for now.

Production build 0.71.5 2024