Hero image

<linkable-title>

Documentation sites like Bootstrap, React, Vue, Angular (and many more) all have this feature where users can click on the title of a section and the url in the address bar gets changed into a link referring to that particular section (usually with a #section-id appended).

The reason behind this feature is to allow users or developers to easily find a section that's most useful at the time they needed it the most. With the busy developer life, when you have a discussion in the team's communication channel, it's the most effective to link to the most relevant section on a page to support your point and the receiver can read up on the particular section instead of the entire page (they still can if they wanted to).

A lot of documentation generators do this automatically by parsing the markdown titles and automatically generate an id for each title.

It's not that hard to implement this feature by yourself but to make things super easy, I've just published a Web component to do that. The beauty of it is that you can use it like any other html elements with a tiny bit of configuration.

The component is called linkable-title and it's published in npm and available via CDN. The component is open-sourced and you can view the source code in Github

To use it, please refer to the usage section (see what I did there?)

Anyways, hope you find it useful and feel free to collaborate in the Github repository!

Happy coding!