3.1 #Components.Permalink The Permalink
The Permalink Component is added to the end of a heading of a section of a webpage. It is especially helpful in a documentation system, style guide, or pattern library. This Component is an internal link, and makes sections within a document easy to access.
Use with this project’s .h-Hidden
and
Xmeter’s .h-Inline
Helpers.
- author
- Chris Harvey
- updated
DOM:
const {xPermalink} = require('aria-patterns') document.querySelector('#section-title > h1').append( xPermalink.render({ id: 'section-title' }) )
Example
Section Title §
Markup: ../../test/out/x-permalink.test.html
<!--link rel="stylesheet" href="/node_modules/aria-patterns/x-permalink/css/dist/c-Permalink.css"/-->
<section id="section-title">
<h1>Section Title
<a class="c-Permalink h-Inline h-Hidden" href="#section-title" aria-label="permalink">§</a>
</h1>
</section>
Source:
c-Permalink.less
, line 7