Skip link
Installation
Learn more about how to install on our getting started docs.
<script type="module">
import '@rhds/elements/rh-skip-link/rh-skip-link.js';
</script>
Import Map Example
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
}
}
</script>
npm install @rhds/elements
<script type="module">
import '@rhds/elements/rh-skip-link/rh-skip-link.js';
</script>
<script type="module">
import '@rhds/elements/rh-skip-link/rh-skip-link.js';
</script>
Import Map Example
<script type="importmap">
{
"imports": {
"@rhds/elements/rh-skip-link/rh-skip-link.js": "./elements/rh-skip-link/rh-skip-link.js"
},
"scopes": {
"./": {
"lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
"lit/decorators/": "https://ga.jspm.io/npm:lit@3.2.0/decorators/",
"tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
},
"https://ga.jspm.io/": {
"@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
"@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
"lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
"lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
"lit-html/is-server.js": "https://ga.jspm.io/npm:lit-html@3.2.0/development/is-server.js"
}
}
}
</script>
Usage
<rh-skip-link>
<a href="#main-content">Skip to main content</a>
</rh-skip-link>
rh-skip-link
| Slot Name | Description |
|---|---|
|
An anchor tag targeting the main page content by id hash. Or, if the |
| DOM Property | Description | Type | Default |
|---|---|---|---|
href |
|
|
None
None
None
None
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.