2.1 KiB
| title | description | video | sass |
|---|---|---|---|
| Breadcrumbs | Breadcrumbs come in handy to show a navigation trail for users clicking through your site. | vQz-Kv5f_Ts | scss/components/_breadcrumbs.scss |
To make a set of breadcrumb links, just add the class .breadcrumbs to a <ul>, and then add links inside of the <li> elements. The current page doesn't require a link or a class, but you should add some explanatory text for AT that indicates which item is the current page.
To mark a disabled item, add the class .disabled to the <li>, and just use plain text instead of a link.
Watch this part in video
We use a CSS ::after element containing a slash character to create the separator between items. Some screen readers will read this character out loud—if this is an issue, you can use a background image or a separate element with aria-hidden="true" to create the separator instead.
If your site is visited by search engines, then you should consider adding Schema.org structure data. This will allow your site to appear more attractive in search results.
For more information, see Breadcrumbs - Google Developers, BreadcrumbList - schema.org.
<nav aria-label="You are here:" role="navigation">
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li class="disabled">Gene Splicing</li>
<li>
<span class="show-for-sr">Current: </span> Cloning
</li>
</ul>
</nav>