Adds spacer and nobreak in menu links

So; that extra markup is most of what this library does, rather than CSS ::after pseudocontent. The span wrapper prevents the link from breaking its line between the last word and the icon. But yes, sometimes themes need to style the icons to make the spacing match the text in menus, especially the icon width and height. This is the CSS provided by the library.

If you provide me a link I can take a look.

I just added a "text external link" to the Links & Resources menu dropdown in the main navigation for https://www.nonprofitdrupal.org.

There you can see the awkward spacing between the last and second-to-last words.

Yup it looks like your theme is inserting a gap between elements, so adding elements adds gaps:

.menu .primary-nav__menu-link > span {
  gap: 0.5rem;
}

This would fix it:

.menu .primary-nav__menu-link.link-purpose  > span {
  gap: 0;
}

The theme is Drupal core's new Olivero, so perhaps to make it OOB compatible the extra styles should be applied within the module?

Alright; I'll have to add a config field for selectors for elements to not receive the Nobreak. That should be easy enough, and parallel the config fields for links to ignore or links to not show the icon at all. I don't see any practical way to make a Nobreak compatible with someone applying a CSS gap on the contents of a link.

But this CSS gap declaration -- where is it coming from? I don't see it in Olivero, only Gin. I like to support common themes/modules out of the box.

Hopefully 1.0.17 solves this for you → .

Automatically closed - issue fixed for 2 weeks with no activity.