homepage

Brown Markup Library

Skip Link

A hidden element that appears when keyboard navigation is used on a page to skip repeated content.

Rendered Component

Header to skip
the main content

HTML

<a class="skip_link" href="#main-content">Skip To Content</a>

CSS

.skip_link {
    font-family: CircularStd, Arial, Helvetica, sans-serif;
    font-weight: 400;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 100;
    background: #ededed;
    color: #000;
    display: block;
    padding: 10px 20px;
    text-align: center;
    transform: translate(-50%, -200%);
    text-decoration: none;
}
.skip_link:focus {
  transform: translate(-50%, 25px);
}
@media screen and (prefers-reduced-motion: no-preference) {
  transition: transform 0.35s;
}

Example from the Brown React Component Library

Brown React Component Library Code