Bootscript Module 31

 Module 31 : Breadcrumbs & Pagination in Bootscript. 

1. Breadcrumbs and Pagination are essential UI navigation components used to improve user experience, accessibility, and content organization in web applications.

Understand why breadcrumbs and pagination exist

Bootstrap implements them

2. coding patterns

Explore advanced and research-based UI decisions

3. Introduction to Breadcrumbs

What are Breadcrumbs?

Breadcrumbs are secondary navigation elements that show users:

Where they are

How they got there

How to go back

Example:

Home > Courses > Web Development > Bootstrap

Why Breadcrumbs Matter (UX Research)

Reduce cognitive load

Improve navigation clarity

Increase completion speed

Enhance accessibility (screen readers)

Research Insight:

Group shows breadcrumbs reduce bounce rate and improve site navigation efficiency.

4. Breadcrumbs in Bootstrap (Bootscript)

Bootstrap Breadcrumb Structure

Bootstrap uses:

<nav> for accessibility

<ol class="breadcrumb"> for structure

.breadcrumb-item for items

Breadcrumb (Standard)

<nav aria-label="breadcrumb"> <ol class="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>

Code

Purpose

<nav aria-label="breadcrumb">

Improves accessibility

<ol class="breadcrumb">

Ordered list for hierarchy

.breadcrumb-item

Individual navigation level

.active

Current page

aria-current="page"

Screen reader clarity

Custom Styling Breadcrumbs

<style> .breadcrumb { background-color: #f8f9fa; padding: 10px; } </style>

5. Exercise – Breadcrumbs

Exercise 1:

Create breadcrumbs for an online learning website:

Home > Dashboard > My Courses > Bootstrap

👉 Requirements:

Use Bootstrap classes

Highlight the active page

Maintain accessibility

6. Breadcrumb Navigation

Title:

Design Breadcrumb Navigation for a Multi-Level Website

Steps:

Create a new HTML file

Include Bootstrap CDN

Build breadcrumb navigation

Apply custom styling

Test navigation links

Output:

Clean UI

Clear hierarchy

Accessible navigation

hierarchical navigation design, critical for dashboards and admin panels.

7. Introduction to Pagination

What is Pagination?

Pagination divides large content into smaller, manageable pages.

Used in:

Blogs

Search results

Tables

Product listings

Why Pagination is Important (UX Perspective)

Improves page performance

Reduces scroll fatigue

Enhances content discoverability

Research Insight:

Google recommends pagination or infinite scroll based on content type and user intent.

8. Pagination in Bootstrap

Basic Pagination Structure

<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item disabled"> <a class="page-link">Previous</a> </li> <li class="page-item active"> <a class="page-link" href="#">1</a> </li> <li class="page-item"> <a class="page-link" href="#">2</a> </li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav>

(Deep Dive)

Class

Function

.pagination

Container

.page-item

Page wrapper

.page-link

Clickable link

.active

Current page

.disabled

Non-clickable state

9. Pagination Sizes

<ul class="pagination pagination-lg">...</ul> <ul class="pagination pagination-sm">...</ul>

Use Case:

Large pagination → dashboards

Small pagination → mobile UI

10. Pagination (Centered & Rounded)

<ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link rounded-pill" href="#">1</a> </li> </ul>

11. Exercise – Pagination

Design pagination for a blog system with:

10 pages

Active page highlight

Disabled previous button on page 1

12. Pagination System

Build Pagination for a Product Listing Page

Steps:

Create product cards

Display 6 products per page (UI only)

Add pagination below cards

Highlight active page

UI design for e-commerce platforms.

13. Breadcrumbs vs Pagination (Comparison)

Feature

Breadcrumbs

Pagination

Purpose

Navigation hierarchy

Content division

UX Benefit

Orientation

Performance

Placement

Top of page

Bottom of content

Usage

Site structure

Large data sets

14. Research 

Research Topics:

Breadcrumbs vs Hamburger Menu

Pagination vs Infinite Scroll

Accessibility impact of navigation components

SEO benefits of breadcrumb schema

Mobile-first pagination strategies

15. Summary

Breadcrumbs improve orientation

Pagination improves performance

Bootstrap provides, accessible components

Proper usage enhances professional UI quality