Building an Accessible Breadcrumb Navigation with Liquid and Shopify

Breadcrumbs, or a breadcrumb navigation, can help enhance how users navigate a website, especially if that website has many pages or products. Breadcrumbs can reduce the number of actions a visitor needs to take in order to navigate to a higher-level page, and improve the discoverability of a website's sections and pages.

This article will walk you through the process and reasoning behind creating an accessible breadcrumb navigation menu in a Shopify theme. In this article you'll learn:

The accessibility requirements for a breadcrumb navigation, and the suggested markup
The ARIA attributes that should be included in breadcrumb navigations
How to use a switch statement to check multiple templates and output breadcrumbs for each template type
How to make your breadcrumb navigation dynamic using theme settings