govuk-design-system
govuk-design-system copied to clipboard
Make it easy to link to sections of a page
I think this is primarily a support need, but other users might have it too.
Sometimes you need to link someone to a specific section on a page, for example:
https://design-system.service.gov.uk/styles/typography/#lists
Currently you have to right click, 'Inspect' and add the 'id' attribute to the url
We tried one approach here: anchor link icons that appear on hover:
https://github.com/alphagov/govuk-design-system/pull/295
The downside is they are not accessible to mobile users, and the icon is probably not widely understood
Another approach would be to add in-page navigation, like Elements did:
https://govuk-elements.herokuapp.com/typography/
Downside - this adds a lot of nav to the top of the page that most users might not need
Idea: Add a little dropdown menu to each heading:
Downside: the dropdown arrow could be confusing, might indicate there is more you can do than just share that section.
Trello ticket: https://trello.com/c/EOkrfNkF/1343-make-it-easy-to-link-to-a-section-on-a-page
With the work done to link to sections within long pages cover this or do we still think it's worthwhile looking at something for all headings?

I think this is more a support need than a user need so I'd be happy to close it, but I'd really like to get in this feature to make support easier so we can link people to sections without having to inspect the page...
Will leave it to you @dashouse to make the decision to close.
I'd really really really appreciate this. Right now I'm inspecting element 3-5 times a day so I can cite a specific section.
FWIW in my use case I'm not trying to cite from mobile - so for me it being an enhancement for mouse based is fine.
@dashouse my use case it to cite very specific paragraphs - I don't think the nav necessarily goes to that granularity.
alternative is to expose all heading levels to the search
alternative is to expose all heading levels to the search
Does that mean when I'm on a thing that I want to link to, I'd have to go to the search to search for that phrase?
Most pages in the Design System follow the same content pattern, which means the same headings are generally re-used across every page – the exception being the styles section, where headings are more likely to be unique.
I'm not sure how useful adding them into search would be because of that – seems like a lot of noise.
Can we look at adding this to the headings section of the typography part of the website? And write a blog explaining why/how users can copy?