Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is highly reusable and flexible. It is created with GitHub’s design system.
Primer CSS offers us so many components, and Breadcrumbs is one of them. In this article, we will learn about breadcrumbs. Breadcrumbs are used to indicate the current page’s location within a navigational hierarchy. To represent content that showcases divided paths breadcrumbs are used.
Primer CSS Breadcrumbs Used Classes:
- breadcrumb-item: This class is used for the respective element to implement this utility.
Syntax:
<div class="breadcrumb-item">
...
</div>Example: This example demonstrates the use of the Primer CSS Breadcrumbs using the breadcrumb-item class.
<!DOCTYPE html> <html>
<head>
<title>Primer CSS Breadcrumbs</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body style="margin:100px">
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3><u>Primer CSS Breadcrumbs</u></h3><br />
</div>
<div class="d-flex flex-justify-center">
<div aria-label="Breadcrumb">
<ol>
<li class="breadcrumb-item">
<a href="#">Home Section</a>
</li>
<li class="breadcrumb-item">
<a href="#">Previous Section</a>
</li>
<li class="breadcrumb-item breadcrumb-item-selected">
<a href="#" aria-current="page">Section selected</a>
</li>
</ol>
</div>
</div>
<br />
<div class="d-flex flex-justify-center">
<div aria-label="Breadcrumb">
<ol>
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Geeks for Geeks</a>
</li>
<li class="breadcrumb-item breadcrumb-item-selected">
<a href="#" aria-current="page">Articles</a>
</li>
</ol>
</div>
</div>
</body>
</html>
|
Output:
Breadcrumbs
Reference: https://primer.style/css/components/breadcrumb