24th May '22
/
0 comments

How to Add Custom, Conditional Skip Links in Bricks

How to Add Custom, Conditional Skip Links in Bricks

By default, Bricks comes with two skip links out of the box, one for the main content area and one for the footer. When a user first lands on the page and start tabbing with their keyboard, this allows them a quick way 'skip' to where they want to go on the page. No need to have tab through every single focusable element to get there. (useful if you have lots of menu links in the header)

In this Pro tutorial we'll look at how we can customise these skip links for different templates, so they better match the content on the page. For example, for single posts if there are lots of other sections on the page, we may want the user to be able to skip straight to the article content, or have a way to go straight to the comments, or a sidebar or anything else.

For an archive page we may want the user to be able to skip over different content types, or go straight to a search form to help them quickly find they need, for example.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 612 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Conditionally Outputting Query Loop Item Based on Post Meta in Bricks

Conditionally Outputting Query Loop Item Based on Post Meta in Bricks

Rendering query-loop enabled posts depending on the value of each post's custom field value is tricky because by default, the custom field plugins' functions or…
Categories:
Conditional Rendering for Logged in/out Users by CSS Classes in Bricks

Conditional Rendering for Logged in/out Users by CSS Classes in Bricks

This tutorial shows how Bricks builder's bricks/element/render filter can be used to conditionally output elements having a class of logged-in to logged-in users only and…
Categories:
JetEngine Checkbox Condition in Bricks

JetEngine Checkbox Condition in Bricks

How elements in Bricks can be conditionally output depending on the selected option from a JetEngine checkbox field.
Categories:
Tags:
Bricks Condition for WishList Member

Bricks Condition for WishList Member

How to render a Bricks element only if the user has access to a specified WishList Member level.
Categories:
Pro
Condition to Check if the Current Category Has At Least One Child

Condition to Check if the Current Category Has At Least One Child

Looking to render an element in the category archive Bricks template only if the category of the current category archive page is a parent? This…
Categories:
Pro
Conditional CSS Classes based on Bricks Query Count

Conditional CSS Classes based on Bricks Query Count

In a Bricks project I am currently working on, there are nested query loops - team members inside departments on a Page. Each team member…
Pro
Conditionally Rendering an Element Outside the Loop based on Taxonomy Term in Bricks

Conditionally Rendering an Element Outside the Loop based on Taxonomy Term in Bricks

A user asks: Hiding element based on taxonomy I have an element in a footer that I want to hide if a page has a…
Categories:
Weekday Condition in Bricks

Weekday Condition in Bricks

As of Bricks 1.7, the built-in "Weekday" condition does not work correctly. This is most likely due to it not taking the site's timezone (set…
Categories: