Cutup #6 Breadcrumbs with microdata
Today, I would like to share with you how to make a Breadcrumb bar. It helps a user improve the findability of websites and indicates where a user is located now.
Let’s get started!!!
Step 1. HTML markup using microdata
① Go to schema.org/BreadcrumbList page. Copy and paste Microdata
like the code below. Microdata is to provide more information for search engines (SEO).
② Edit HTML inside <nav>
element.
The HTML <nav>
element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes. — MDN
- Change the URL in
href
in each<a>
tag. - Change each breadcrumb title in
<span>
tag. - Change the
content
number inmeta
tag accordingly like 1, 2, 3, 4 … - Delete
<a>
tag if you want from the last<li>
element which is the current location.
Note from MDN
- It’s not necessary for all links to be contained in a
<nav>
element.<nav>
is intended only for major block of navigation links; typically the<footer>
element often has a list of links that don't need to be in a<nav>
element. - A document may have several
<nav>
elements, for example, one for site navigation and one for intra-page navigation.aria-labelledby
can be used in such case to promote accessibility, see example. - User agents, such as screen readers targeting disabled users, can use this element to determine whether to omit the initial rendering of navigation-only content.
Step 2. CSS style
① Remove default list styles.
ol {
list-style: none;
margin: 0;
padding: 0;
}a {
color: #666;
text-decoration: none;
}
② Change the colour to the last-child
item of li
.
li {
&:last-child {
color: salmon;
}
}
③ Float the items to the left
If you add float: left;
property in <li>
, you will face a problem like the image below.
The next element,<div>Button</div>
moves up to the left of the.<li>Current Location</div>
To prevent this situation, I added overflow: hidden;
in <ol>
tag like the image below so the next element will stay in the next line.
Here is the example.
In this time I wouldn’t explain how to design breadcrumbs in detail. Briefly, I tried to using CSS triangle but I couldn’t make it what I wanted. So I used transform: skew
instead of CSS triangle. I will write an article about CSS triangle. So please stay tuned and gives me 👏loves if you liked it.
🔍 Reference in CodePen
- Simple “transform: skew” breadcrumb
- Breadcrumb with arrow shaped links
- CSS Triangle Breadcrumbs
📖 Articles
🎈 That’s all for now
💌 Any questions or feedback
I would love to hear your feedback on how I can make it better for you. Please leave your comments below or through my Twitter.
☕️
Lastly, I would love to share <FrontEnd30 /> where I learned many cool front-end techniques. Big thanks to Ryan Yu for sharing super unique front-end skills with me.