Basic Breadcrumbs in Bootstrap

Breadcrumbs are a navigation aid that shows users their current location within a site or application, often used to indicate the hierarchy of pages or sections. In Bootstrap, breadcrumbs are straightforward to implement and style, helping to improve site navigation and user experience.

1. Basic Breadcrumb Structure

A basic breadcrumb in Bootstrap consists of an unordered list with breadcrumb items, each separated by a slash (or another separator). The first item typically represents the homepage or the root of the site, while subsequent items represent deeper levels of navigation.

a. Basic Breadcrumb Example

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>

• <nav aria-label="breadcrumb">: Wraps the breadcrumb list and provides an accessible label for screen readers.
• <ol class="breadcrumb">: Creates an ordered list with the breadcrumb class, which applies the breadcrumb styling.
• <li class="breadcrumb-item">: Represents each item in the breadcrumb trail. The class breadcrumb-item is used for styling.
• <a href="#">: Links to different pages or sections.
• <li class="breadcrumb-item active" aria-current="page">: Marks the current page. The active class is used to style the current item, and aria-current="page" indicates that this item is the current page.

2. Styling and Behavior

Bootstrap’s default breadcrumb styling includes separators (usually slashes) between items and adjusts the appearance to make the current page item stand out.

a. Default Styling

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>

• Separators: Bootstrap automatically adds separators between breadcrumb items.
• Current Page: The active class styles the current page item differently, typically without a link.

3. Breadcrumb Variants

a. Breadcrumbs with Custom Separators

If you want to use a different separator than the default slashes, you can customize the breadcrumb 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: Uses a custom separator (e.g., ">") instead of slashes.

b. Breadcrumbs in Navbar

Breadcrumbs can be integrated into a navbar for a more cohesive design.

Example:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        <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>
  </div>
</nav>

• .navbar: Includes breadcrumbs within a navigation bar.

4. Responsive Breadcrumbs

Bootstrap breadcrumbs are responsive by default and will adapt to different screen sizes. For very long breadcrumb trails, you might want to ensure they don’t overflow.

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 breadcrumb items will wrap appropriately on smaller screens.

5. Accessibility Considerations

Bootstrap’s breadcrumb component includes aria-label and aria-current attributes to improve accessibility.

• aria-label="breadcrumb": Describes the breadcrumb navigation for screen readers.
• aria-current="page": Indicates the current page item within the breadcrumb trail.

Summary of Basic Breadcrumbs in Bootstrap

• Basic Structure: Use <nav>, <ol class="breadcrumb">, and <li class="breadcrumb-item"> to create breadcrumbs.
• Styling and Behavior: Bootstrap provides default styling with separators and highlights the current page.
• Variants: Customize separators with CSS or integrate breadcrumbs into navbars.
• Responsive: Breadcrumbs adapt to various screen sizes and handle long text appropriately.
• Accessibility: Use aria-label and aria-current for improved accessibility.