Jump to main content

Skip navigation and jump straight to your main content

2021-08-18 Accessibility
This site has a "skip to content" function, have you noticed? After loading a page the first tab press will focus on the anchor link and make it visible on the page. Follow this guide to make your own navigation skipper.
Place this row at the top right after your <body>
<a href="#content" id="jumper">Jump to main content</a>
Add the the ID where you want the anchor link to jump down to
<div id="content">
<!-- Your page content goes here -->
</div>
Add this to your css file
#jumper {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#jumper:focus {
    position: initial;
    width: initial;
    height: initial;
    display: block;
    text-align: center;
    padding: 1em;
    color: #fff;
    background: #333;
}

You might also want to read the following

2021-08-12 Piranha

Edit block templates inside the manager with Scriban

Want to edit block templates without rebuilding your project? Let Scriban help you with that. Scriban parses your custom Html and objects and then gives you HTML ready to be used anywhere.

2021-08-10 Piranha

Manage your footer with a region

Footers are a basic component of almost all websites. Therefor we'll make it as easy as possible for us to manage ours by turning it into a region area on our site model. This guide uses Bootstrap 5

2021-08-08 Piranha

Carousel block for Piranha with Bootstrap

A good image slider or carousel can complete your website. This post will give you a quick example on how you can add your own carousel to your Piranha site

2021-08-03 Piranha

Piranha block for social media links

Most businesses and even personal sites have the need to share their social media links. Here's an example on how you can turn your social media links into a reusable block

2021-08-03 Piranha

Display breadcrumbs with Bootstrap 5 on a Piranha site

Here's a quick and easy way to implement breadcrumbs on your Piranha site. The solution is based on Bootstrap 5 breadcrumb component