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

Related Tutorials..

Pro
User Role Conditional Output in Bricks

User Role Conditional Output in Bricks

This Pro tutorial provides the steps to output elements based on their CSS class to users of the specified role in WordPress when using Bricks…
Categories:
Conditionally Outputting Based on Query Count in Bricks

Conditionally Outputting Based on Query Count in Bricks

Update on 22 Sep 2023: There's a much simpler built-in method now. See this post. In the Bricks Facebook group a user asks: Is there…
Categories:
Pro
Bricks Dynamic Condition – Check if today falls within 5 days before any holiday date

Bricks Dynamic Condition – Check if today falls within 5 days before any holiday date

Creating a custom condition that returns true or false depending on whether today falls within 5 days before any holiday dates selected on a Meta…
Categories:
Tags:
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:
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 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:
Render an element having a specific HTML ID based on value of a custom field

Render an element having a specific HTML ID based on value of a custom field

This tutorial provides the steps to use Bricks' bricks/element/render filter to conditionally output an element that has the specified HTML ID based on the value…
Categories: