Components
Skip link
Use the skip link at the start of a page to allow the user to jump straight to the most important content.
Contents
HTML
To view the skip link component tab to this example, or click inside this example and press tab.
<a href="#main-content" class="tna-skip-link" data-module="tna-skip-link">
Skip to main content
</a>Nunjucks
Nunjucks options
| Name | Type | Description |
|---|---|---|
| text | string |
If set, the text to appear in the skip link. Default value: |
| href | string |
If set, the ID of the element to skip to. Default value: |
| classes | string |
Classes to add to the skip link. |
| attributes | object |
HTML attributes (for example data attributes) to add to the skip link. |
{% from "nationalarchives/components/skip-link/macro.njk" import tnaSkipLink %}
To view the skip link component tab to this example, or click inside this example and press tab.
{{ tnaSkipLink({
}) }}Jinja
Important information
This is an experimental feature showing a Jinja2 macro based on the Nunjucks example. Check the converted code for accuracy.
{% from "components/skip-link/macro.html" import tnaSkipLink %}
To view the skip link component tab to this example, or click inside this example and press tab.
{{ tnaSkipLink({
}) }}