Skip to content

Instantly share code, notes, and snippets.

@shopifypartners
Last active September 11, 2020 17:34
Show Gist options
  • Save shopifypartners/9bb79170c73169d3359c50d82ff34c98 to your computer and use it in GitHub Desktop.
Save shopifypartners/9bb79170c73169d3359c50d82ff34c98 to your computer and use it in GitHub Desktop.
Simple CSS styles for accessible breadcrumbs - https://www.shopify.com/partners/blog/breadcrumb-navigation
.breadcrumbs {
font-size: .85em;
margin: 0 0 2em;
}
.breadcrumbs ol {
list-style-type: none;
margin: 0;
padding: 0;
}
.breadcrumbs li {
display: inline-block;
}
.breadcrumbs a {
text-decoration: underline;
}
.breadcrumbs li:not(:last-child):after {
content: "›\00a0";
display: inline-block;
padding-left: .75ch;
speak: none;
}
.breadcrumbs [aria-current="page"] {
color: inherit;
font-weight: normal;
text-decoration: none;
}
.breadcrumbs [aria-current="page"]:hover,
.breadcrumbs [aria-current="page"]:focus {
text-decoration: underline;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment