Bootsrapmarkup~20 mins

Breadcrumb component in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Bootstrap Breadcrumb Component

📖 Scenario: You are building a website navigation aid called a breadcrumb. It shows users the path they took to reach the current page. This helps users understand where they are and easily go back to previous pages.

🎯 Goal: Create a breadcrumb navigation bar using Bootstrap 5 that shows the path: Home > Library > Data.

📋 What You'll Learn

Use Bootstrap 5 breadcrumb component structure

Include three breadcrumb items: Home, Library, and Data

Make Home and Library clickable links

Make Data the current page and not a link

Use semantic HTML and accessibility attributes

💡 Why This Matters

🌍 Real World

Breadcrumbs help users understand their location on a website and navigate easily back to previous pages.

💼 Career

Web developers often build navigation components like breadcrumbs to improve user experience and accessibility.

Progress0 / 4 steps

Create the basic HTML structure

Write the basic HTML5 skeleton with lang="en", meta charset="UTF-8", and meta viewport tags. Inside the <body>, add a <nav> element with aria-label="breadcrumb". Inside the <nav>, add an ordered list <ol> with class breadcrumb.

Bootsrap




    
    
    Breadcrumb Example

Need a hint?

Start by writing the HTML5 page structure and add a <nav> with aria-label="breadcrumb". Inside it, add an ordered list with class breadcrumb.

Add breadcrumb items for Home and Library

Inside the <ol class="breadcrumb">, add two list items. The first list item should be a link with text Home and href #. The second list item should be a link with text Library and href #. Both list items should have class breadcrumb-item.

Bootsrap




    
    
    Breadcrumb Example

Need a hint?

Use <li> with class breadcrumb-item for each item. Inside each <li>, add an <a> tag with href # and the correct text.

Add the current page breadcrumb item

Add a third list item inside the <ol class="breadcrumb"> with class breadcrumb-item active. The text should be Data. Add the attribute aria-current="page" to this list item. Do not make this item a link.

Bootsrap




    
    
    Breadcrumb Example



    
        Home
        Library

Need a hint?

The current page breadcrumb item should have class breadcrumb-item active and attribute aria-current="page". It should not be a link.

Add Bootstrap CSS link for styling

Inside the <head> section, add a <link> tag to include Bootstrap 5 CSS from the official CDN: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css. Use the attributes rel="stylesheet" and integrity="sha384-9ndCyUa6mY5y0v+0U5r5b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6b6" and crossorigin="anonymous" exactly as shown.

Bootsrap




    
    
    Breadcrumb Example
    



    
        Home
        Library
        Data

Need a hint?

Include the Bootstrap CSS link inside the <head> to style the breadcrumb properly.