Breadcrumb Items and Links in Bootstrap

In Bootstrap, breadcrumb items and links are used to create a hierarchical navigation trail that helps users understand their current position within a website or application. Breadcrumbs are typically implemented as an ordered list with each item representing a level in the navigation hierarchy.

1. Breadcrumb Items

Breadcrumb items are the individual components of a breadcrumb trail, each representing a level of navigation. The items are usually linked to different pages or sections, with the current page not being linked.

a. Basic Breadcrumb Items

HTML Code:

<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>

• <ol class="breadcrumb">: Creates the breadcrumb list.
• <li class="breadcrumb-item">: Represents each breadcrumb item. The class breadcrumb-item is used for styling.
• <a href="#">: Links to different pages or sections in the breadcrumb trail.
• <li class="breadcrumb-item active" aria-current="page">: Marks the current page or section. The active class styles it differently, and aria-current="page" indicates that this item is the current page.

2. Links in Breadcrumbs

Breadcrumb links are used for all items except the current page. They allow users to navigate back to previous levels in the hierarchy.

a. Adding Links

Example:

<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>

• <a href="#">: Provides a clickable link to navigate to the previous page or section.

b. Styling Links

By default, breadcrumb links are styled as inline elements with a separator. You can customize their appearance using CSS if needed.

Example:

<style>
  .breadcrumb-item a {
    color: #007bff;
    text-decoration: none;
  }
  .breadcrumb-item a:hover {
    text-decoration: underline;
  }
</style>

<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>

• .breadcrumb-item a: Customizes link color and removes the underline.
• .breadcrumb-item a:hover: Adds an underline on hover for better user interaction.

3. Handling the Current Page

The current page in the breadcrumb trail is typically not a link, as it represents the user’s current location. It is styled differently to indicate that it is the current page.

Example:

<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>

• <li class="breadcrumb-item active" aria-current="page">: Indicates that this item is the current page, without a link.

4. Customizing Breadcrumb Separators

Bootstrap uses slashes ("/") by default as separators between breadcrumb items. You can customize or change the separator using CSS.

Example:

<style>
  .breadcrumb-item + .breadcrumb-item::before {
    content: " > "; /* Custom separator */
  }
</style>

<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>

• .breadcrumb-item + .breadcrumb-item::before: Sets a custom separator (e.g., ">") between items.

5. Responsive Breadcrumbs

Bootstrap breadcrumbs are responsive and adjust automatically to different screen sizes. However, if you have a very long breadcrumb trail, you might want to ensure it doesn’t overflow or become cluttered.

Example:

<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"><a href="#">Data</a></li>
    <li class="breadcrumb-item active" aria-current="page">Long Breadcrumb Item</li>
  </ol>
</nav>

• Long items will wrap appropriately on smaller screens.

Summary of Breadcrumb Items and Links in Bootstrap

• Breadcrumb Items: Represent different levels in the navigation hierarchy. Use <li class="breadcrumb-item"> for styling.
• Links: Used for all items except the current page, allowing navigation to previous levels.
• Current Page: Indicated with the active class and not linked. Use aria-current="page" for accessibility.
• Custom Separators: Customize separators with CSS if needed.
• Responsive: Breadcrumbs adapt to various screen sizes, handling long items appropriately.