Skip links

Skip links are useful elements on a website that allow users to skip the navigation part and move to the main page. Especially useful when there are many interactive elements to jump through before they can visit the main section of the app.

<a href="#main" class="SkipLink">  
	Skip to main content  
</a>  
  
<styles>  
.SkipLink {  
  position: absolute;  
  top: -100px;  
  left: 0;  
  background-color: red;  
  color: white;  
  padding: 1rem;  
  border-radius: 0.5rem;  
  border: none;  
  
  &:focus {  
    top: 0;  
  }  
    
}  
</styles>