How to Create a Triangle Breadcrumb Arrows in Bootstrap ? - Coding

Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn How to create triangle breadcrumb arrows in Bootstrap. Breadcrumbs are a way to show users their current location within a website’s and allow them to navigate back to previous pages easily. Adding triangle arrows gives a distinct and stylish appearance to the standard breadcrumb.

These are the following approaches:

Table of Content

By using Pure CSS
Bootstrap Utility Classes and Custom CSS

By using Pure CSS

HTML Structure: Define the structure of the breadcrumbs using Bootstrap classes.
CSS Styling: Triangle effect by CSS, we will use CSS style to create triangle shape.

Example: We will apply custom CSS to shape the breadcrumb items into triangles using CSS borders.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <title>Triangular Breadcrumbs</title>
    <link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 
          rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
</head>
<body>
     <h2 class="text-success"> 
        GeeksforGeeks 
    </h2> 
    <h2> 
        How To Create a Triangle BreadCrumb arrows in Bootstrap?         
    </h2>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb triangle-breadcrumb">
            <li class="breadcrumb-item">
               <a href="#">Java</a>
            </li>
            <li class="breadcrumb-item">
               <a href="#">python</a>
            </li>
            <li class="breadcrumb-item">
               <a href="#">c++</a>
            </li>
            <li class="breadcrumb-item active" 
                aria-current="page">
               Ruby
            </li>
        </ol>
    </nav>
</body>
</html>

CSS

/* Write CSS Here */
.breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.breadcrumb .breadcrumb-item {
    position: relative;
    margin: 0;
    padding: 0 15px;
}

.breadcrumb .breadcrumb-item + 
.breadcrumb-item:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #007bff;
}

.breadcrumb .breadcrumb-item a {
    color: #007bff;
    text-decoration: none;
    padding: 5px 10px;
    display: inline-block;
    background-color: #f8f9fa;
    border-radius: 3px;
}

.breadcrumb .breadcrumb-item.active a {
    color: #495057;
    background-color: #e9ecef;
}

.breadcrumb .breadcrumb-item:first-child a {
    border-radius: 3px 0 0 3px;
}

.breadcrumb .breadcrumb-item:last-child a {
    border-radius: 0 3px 3px 0;
}

.breadcrumb .breadcrumb-item + 
.breadcrumb-item {
    padding-left: 25px;
}

.breadcrumb .breadcrumb-item + 
.breadcrumb-item a {
    margin-left: 10px;
    border-radius: 0;
}

Output:

Bootstrap Utility Classes and Custom CSS

HTML Structure: Use Bootstrap Grid System and Utility classes to lay Breadcrumb items.
CSS Styling: Using custom CSS for styling to give the arrow effect.

Example: We Will Use the Pseudo-Elements for Arrow Shapes.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <title>Triangle Breadcrumbs</title>
    <link href=
 "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" 
          rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <h2 class="text-success"> 
        GeeksforGeeks 
    </h2> 
    <h2> 
        How To Create a Triangle
      BreadCrumb arrow in Bootstrap?         
    </h2>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb triangle-arrow-breadcrumb">
            <li class="breadcrumb-item">
              <a href="#">Home</a></li>
            <li class="breadcrumb-item">
              <a href="#">Library</a></li>
            <li class="breadcrumb-item active" 
                aria-current="page">
               Data
            </li>
        </ol>
    </nav>
</body>
</html>

CSS

/* Write CSS Here */
.breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.breadcrumb .breadcrumb-item {
    position: relative;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
}

.breadcrumb .breadcrumb-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: -15px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #007bff;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid white;
}

.breadcrumb .breadcrumb-item a {
    color: white;
    text-decoration: none;
}

.breadcrumb .breadcrumb-item.active {
    background-color: #0056b3;
}

.breadcrumb .breadcrumb-item.active::after {
    border-left-color: #0056b3;
}

.breadcrumb .breadcrumb-item.active a {
    color: white;
}

Output:

Reffered: https://www.geeksforgeeks.org

Bootstrap

Related
How to Create Multipage Product showcase Template in Bootstrap ?
How to Change Close Button Color in Bootstrap 5?
How to use Bootstrap with NextJS?
How to Create Responsive Card with a Video Background in Bootstrap?
How to Customize Bootstrap 5?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	11