Bootstrap 5 Breadcrumb

Bootstrap 5 Breadcrumb

Bootstrap 5 Breadcrumb specifies the current page location inside the navigational hierarchy. It enhances the accessibility of the website because it separates the navigation item with a separator.

Example:

Steps To Create bootstrap 5 Breadcrumb :

  • Wrap <ol> (ordered list) inside <nav>.
  • Assign .breadcrumb to the <ol> element base class.
  • Add .breadcrumb-item to <li> element base class.
  • To make breadcrumb item active ,assign .active to <li> element base class also.

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

Note:In this example,.breadcrumb is assigned to the breadcrumb container base class while .breadcrumb-item is assigned to the breadcrumb item base class.

Note!! You have to focus on .breadcrumb, .breadcrumb-item, .active classes since these are used during breadcrumb creation.

Changing Bootstrap 5 Breadcrumb Separator

Bootstrap 5 breadcrumb separator can be changed very easily by a custom property --bs-breadcrumb-divider.

Example

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Code Explanation

Note:In this example, the breadcrumb separator has been changed by a custom property --bs-breadcrumb-divider.

Online Test / Quiz