MenusLesson 51Free preview
Breadcrumbs
This lesson is part of How To · All levels
Summary
Breadcrumbs are navigational tracks that show the user's position in a site's hierarchy, for example Home > Products > Shoes. This component helps visitors return to their previous level without pressing the back button. A good structure uses a sequential list, visual separator, and last page markers.
Key points
- Use <nav aria-label="Breadcrumb"> and list <ol> for hierarchical structures.
- Separators like slash can be made with pseudo-elements like before.
- The last item marks the current page and should not be a link.
- Aria-current="page" explains the item being opened.
- List-style: none eliminate the list-built bullet.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.