Opens in a new tab
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
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:
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:
Condition for Checking Current Post Category in Bricks

Condition for Checking Current Post Category in Bricks

How we conditionally display an element based on the current post's categories.
Categories:
Pro
Conditional Rendering Based On Meta Box Group’s Sub Field

Conditional Rendering Based On Meta Box Group’s Sub Field

This Pro tutorial shows how we can output an element on a single post pages only if a specified sub-field (custom field created using Meta…
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
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
Day of Week Condition in Bricks

Day of Week Condition in Bricks

Displaying elements conditionally based on the current day of the week.
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: