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 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Conditional Section when Post has a Featured Image in Bricks

Conditional Section when Post has a Featured Image in Bricks

This Pro tutorial provides the steps to output a Section in Bricks on single posts (of any post type) only if the post has a…
Categories:
Pro
How to Insert Element(s) Between Query Loop Posts in Bricks

How to Insert Element(s) Between Query Loop Posts in Bricks

Update on 16 Aug 2023: Follow this tutorial instead. This Pro tutorial shows how we can insert a Div (or any custom HTML) after nth…
[Function] Current Term Has Children

[Function] Current Term Has Children

Updated on 20 Jul 2024 A user asks: I'm working on an archive template for WooCommerce products. I'm trying to hide a section if there…
Pro
Conditionally outputting an element in a Query Loop based on date-type custom field

Conditionally outputting an element in a Query Loop based on date-type custom field

This Pro tutorial shows how to output an element in a Bricks' query loop only if the value of a date-type of custom field for…
Categories:
Checking for Post Type in Bricks

Checking for Post Type in Bricks

A way to output elements conditionally based on the current post type in the loop in Bricks.
Categories:
Conditional Output based on Manual Excerpt in Bricks

Conditional Output based on Manual Excerpt in Bricks

How to display a post’s excerpt only if it has been manually set.
Categories:
Pro
Conditional Rendering of ACF Repeater Rows Based on True / False Sub Field in Bricks

Conditional Rendering of ACF Repeater Rows Based on True / False Sub Field in Bricks

This Pro tutorial provides the steps to modify a ACF Repeater query loop to only output the rows for which a True / False type…
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: