DocsAllOver Breadcrumb Navigation with Bootstrap 5 and FontAwesome Snippets

Breadcrumb Navigation with Bootstrap 5 and FontAwesome

Oct. 25, 2024

Bootstrap, Bootstrap 5, Responsive, Clean UI, Navbar

Full Screen

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Bootstrap 5 Breadcrumb Navigation with FontAwesome</title>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css' rel='stylesheet'>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap');


        body {
            font-family: 'Sen', sans-serif;
            background: #e3f2fd;
        }
    </style>
</head>

<body>
    <div class="bg-light mb-5 py-3 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav class="breadcrumb-wrapper breadcrumb-icon-1" aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item"><a href="#">Examples</a></li>
                            <li class="breadcrumb-item"><a href="#">Snippets</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Bootstrap With FontAwesome</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-light mb-5 py-3">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav class="breadcrumb-wrapper  breadcrumb-icon-2" aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item"><a href="#">Examples</a></li>
                            <li class="breadcrumb-item"><a href="#">Snippets</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Bootstrap With FontAwesome</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-light mb-5 py-3">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav class="breadcrumb-wrapper  breadcrumb-icon-3" aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item"><a href="#">Examples</a></li>
                            <li class="breadcrumb-item"><a href="#">Snippets</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Bootstrap With FontAwesome</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</body>

</html>

/* Common style */
.breadcrumb-item+.breadcrumb-item:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.breadcrumb-icon-1 .breadcrumb-item+.breadcrumb-item:before {
    content: "\f101";
}

.breadcrumb-icon-2 .breadcrumb-item+.breadcrumb-item:before {
    content: "\f58e";
}

.breadcrumb-icon-3 .breadcrumb-item+.breadcrumb-item:before {
    content: "\f152";
}

//Doesn't require any JS.

This Bootstrap 5 snippet showcases a clear and concise breadcrumb navigation component that guides users through a website's hierarchy. The breadcrumb uses FontAwesome icons to enhance visual appeal and provide additional context.

Key Features:

Responsive Design: The breadcrumb navigation adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the breadcrumb using Bootstrap's CSS classes and FontAwesome icons to match your website's design and branding.
Clear Navigation: The breadcrumbs are displayed in a clear and concise manner, making it easy for users to understand their current location and navigate back to previous pages.
Icon Integration: FontAwesome icons can be used to visually represent different sections of the website, adding a visual dimension to the breadcrumb navigation.

Implementation:

Include Bootstrap 5 and FontAwesome: Ensure you have Bootstrap 5 and FontAwesome installed and configured in your project.
Create the HTML Structure: Set up the basic HTML structure for the breadcrumb, including the container, breadcrumb items, and link elements.
Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the breadcrumb and its elements, such as breadcrumb, breadcrumb-item, and breadcrumb-item-active.
Add FontAwesome Icons: Use FontAwesome's CSS classes to add icons to the breadcrumb items, enhancing the visual appeal and providing additional context.

By following these steps, you can create a visually appealing and interactive carousel component that enhances the user experience on your website.

Latest Snippets

View All