Davidson Styleguide

Skip Nav 

<a href="#main-content" class="skip-nav">Skip to main</a>
 
{% include '@link' with { link : skipnav } %}
 
{
  "skipnav": {
    "variant": "skip-nav",
    "url": "#main-content",
    "title": "Skip to main"
  }
}
  • Content: 
    .skip-nav {
  @include rr-font-compute(xl, wide);
  display: flex;
  position: absolute;
  top: -5rem;
  justify-content: center;
  width: 100%;
  background-color: color(davidson-black);

  &:link,
  &:visited {
    color: color(davidson-white);
  }

  &:active,
  &:hover,
  &:focus {
    color: color(davidson-green);
  }

  &:focus {
    top: 0;
    transition: top .5s;
  }
}
  • URL: /components/raw/skip-nav/skip-nav.scss
  • Filesystem Path: patterns/molecules/navigation/skip-nav/skip-nav.scss
  • Size: 381 Bytes

Title: Skip Nav

This off-canvas button appears when a user presses the Tab key. It is used by primarily by users with mobility impairments. To test it, open this pattern in a new window.

This has no options or content and must always be present, so there is no conditional on this pattern’s presentation.