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