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 in meta 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.

Using the aria-labelledby attribute

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

: The Navigation Section element

Breadcrumbs In Web Design: Examples And Best Practices

Breadcrumb Navigation with CSS Triangles | CSS-Tricks

CSS Triangle | CSS-Tricks

transform

🎈 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.

🎉 Happy codesign today