Breadcrumb component in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a breadcrumb component in web design?

A breadcrumb component shows the user's current page location within a website's hierarchy. It helps users understand where they are and easily navigate back to previous pages.

beginner

How do you create a breadcrumb using Bootstrap?

Use the <nav> element with <ol class="breadcrumb"> inside. Each breadcrumb item is a <li class="breadcrumb-item">. The current page item has the class "active" and aria-current="page" for accessibility.

intermediate

Why is aria-current="page" important in a breadcrumb?

It tells screen readers which breadcrumb item is the current page. This improves accessibility by helping users who rely on assistive technology understand their location.

beginner

What Bootstrap class styles the breadcrumb container?

The class "breadcrumb" on an ordered list (<ol>) styles the breadcrumb container with proper spacing and separators.

beginner

How can breadcrumbs improve user experience on a website?

Breadcrumbs help users see their path, reduce clicks to go back, and lower confusion about site structure. They make navigation faster and clearer.

Which HTML element is recommended to wrap a breadcrumb for semantic meaning?

A <div>

B <nav>

C <section>

D <header>

The

element indicates a navigation section, which is appropriate for breadcrumbs.

In Bootstrap, which class is used on the list to style breadcrumbs?

A breadcrumb-item

B nav-breadcrumb

C breadcrumb-container

D breadcrumb

The class "breadcrumb" is applied to the

element to style the breadcrumb container.

What attribute should the current breadcrumb item have for accessibility?

A aria-current="page"

B aria-label="current"

C aria-selected="true"

D aria-hidden="false"

aria-current="page" marks the current page in the breadcrumb for screen readers.

Which Bootstrap class is used on each breadcrumb item?

A breadcrumb-active

B breadcrumb-link

C breadcrumb-item

D breadcrumb-element

Each breadcrumb item uses the class "breadcrumb-item".

What is the main purpose of a breadcrumb component?

A Show user location in site hierarchy

B Change website theme

C Collect user data

D Display advertisements

Breadcrumbs show the user's current location within the website's structure.

Explain how to build a breadcrumb component using Bootstrap and why accessibility attributes are important.

Think about semantic HTML and ARIA roles.

Describe how breadcrumbs improve navigation and user experience on websites.

Consider how users find their way around a website.