Need help placing active class on anchor instead of li

joachimvt - 1 month ago

I've created my own custom theme, copypasting from the Starter theme. In my navigation partial I use this twig directive:

{{ structure() .linkAttributesDropdown({'data-toggle': 'dropdown'}) .listClass('nav navbar-nav navbar-right') .childListClass('dropdown-menu') .render()|raw }}

I would like to have the active link class on the < a > anchor tag instead of the list < li > tag. How could I do this. I know the template off navigation is in navigation-module/resources/views/macro.twig, but I don't want to change this file. How could I change this in my custom theme ?

Answer

- 1 month ago

In that particular macro there is not, no. However you have a few nice options that could help you out..

  • You could copy the macro to your-theme/resource/views/addons/anomaly/navigation-module/macro.twig and adjust the options by adding something like {{ link.active ? options.get('anchor_active_class', 'example') }} to the anchor's class OR hardcoding it since it's bundled in your theme. This will automatically overload that view.
  • You could copy the macro to your theme wherever you like (i.e. views/macros/nav.twig) and define the macro to use in your menu function like ...macro('theme::macros/nav')...
  • You could change your CSS.

Mostly this was for cleanliness / options overload. The options could get a little crazy if I get to granular.

Let me know if this helps. If it's something others agree on I could add it into core (maybe share this with the Slack team too).

ryanthompson - 1 month ago

In that particular macro there is not, no. However you have a few nice options that could help you out..

  • You could copy the macro to your-theme/resource/views/addons/anomaly/navigation-module/macro.twig and adjust the options by adding something like {{ link.active ? options.get('anchor_active_class', 'example') }} to the anchor's class OR hardcoding it since it's bundled in your theme. This will automatically overload that view.
  • You could copy the macro to your theme wherever you like (i.e. views/macros/nav.twig) and define the macro to use in your menu function like ...macro('theme::macros/nav')...
  • You could change your CSS.

Mostly this was for cleanliness / options overload. The options could get a little crazy if I get to granular.

Let me know if this helps. If it's something others agree on I could add it into core (maybe share this with the Slack team too).

joachimvt - 1 month ago

Thanks for the advice. I will copy the macro to your-theme/resource/views/addons/anomaly/navigation-module/macro.twig and adjust the options. I don't think there is a need for more options. Overriding the file is a good alternative in my opinion.

joachimvt - 1 month ago

To update the structure {{ structure() }} macro you should copy the macro of pages-module to your-theme/resource/views/addons/anomaly/pages-module/macro.twig I was using the navigation-module and that was not working.

ryanthompson - 1 month ago

Yes same principle but navigation won't work if you're not using it :-P