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 Output in Bricks based on if Content has Headings

Conditional Output in Bricks based on if Content has Headings

How to prevent the output of the table of contents if the content has no headings.
Categories:
Tags:
Check if a given category has at least one post

Check if a given category has at least one post

There could be situations where you want to check if a given category (by its slug) has at least 1 post assigned to that category.…
Categories:
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:
Pro
Month and Day Condition in Bricks

Month and Day Condition in Bricks

This Pro tutorial shows how we can define a custom function that takes in a month in the three-letter format (like Dec) and a day…
Categories:
Pro
Conditional Related Posts in Bricks

Conditional Related Posts in Bricks

How to output a section only if there is at least 1 related post for the current post being viewed.
Categories:
Pro
City-based and Country-based Conditional Output in Bricks

City-based and Country-based Conditional Output in Bricks

This Pro tutorial provides the steps to render a Bricks element only if the visitor is from the specified country or city. Note: Caching may…
Categories: