Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support classes and attributes in header primary links #978

Merged

Conversation

frankieroberto
Copy link
Contributor

@frankieroberto frankieroberto commented Jul 5, 2024

Description

This adds support for adding optional custom CSS classes or other HTML attributes to the list item tags of the primary links within the Header component.

This gives the header navigation a bit more flexibility to be customised by services, who may wish to do things like highlighting the current section, having some items left-aligned and some right aligned, colour-coding the sections, adding data attributes for testing purposes, or other things we’ve not yet thought of.

The options are enabled by supporting classes and attributes as params within the primaryLinks objects in the Nunjucks macro, like this:

{{ header({
  "showNav": "true",
  "showSearch": "false",
  "primaryLinks": [
    {
      "url"  : "https://www.nhs.uk/conditions",
      "label" : "Health A-Z",
      "classes": "app-header__navigation-item--current",
      "attributes": {
        "aria-current": "true"
      }
    },
    {
      "url" : "https://www.nhs.uk/live-well/",
      "label" : "Live Well"
    }
  ]
}) }}

Checklist

@frankieroberto frankieroberto force-pushed the support-classes-and-attributes-in-header-primary-links branch from 6d609ee to 08042c7 Compare July 5, 2024 14:36
paulrobertlloyd
paulrobertlloyd previously approved these changes Jul 9, 2024
Copy link
Contributor

@paulrobertlloyd paulrobertlloyd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This would be super helpful, using all kinds of hacks at the moment to try and style individual navigation items.

Might also be a good idea to bring in the attributes macro used by GOV.UK Frontend (and added in #969) via a separate PR so that boolean attributes are supported properly.

@edwardhorsford
Copy link
Contributor

edwardhorsford commented Jul 9, 2024

This would be super helpful, using all kinds of hacks at the moment to try and style individual navigation items.

Might also be a good idea to bring in the attributes macro used by GOV.UK Frontend (and added in #969) via a separate PR so that boolean attributes are supported properly.

@paulrobertlloyd yeah it's part of #969 - though I now think it's probably better to bring it in as a separate pr sooner so that it can apply to other components and not be blocked by task list.

@frankieroberto
Copy link
Contributor Author

@edwardhorsford nice - if you can pull that into a separate PR and get that merged, I can use the macro in the one.

@anandamaryon1 anandamaryon1 merged commit 17a4c06 into main Jul 17, 2024
2 checks passed
@anandamaryon1 anandamaryon1 deleted the support-classes-and-attributes-in-header-primary-links branch July 17, 2024 10:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants