Skip to content
Related Articles

Related Articles

Primer CSS Breadcrumbs

Improve Article
Save Article
  • Last Updated : 24 Apr, 2022
Improve Article
Save Article

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. 

HTML




<!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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!