Government of
India
Powered by NeGD | MeitY Government of India® UX4G
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Examples #
Create a breadcrumb with the bare minimum of styling by using an ordered or unordered list with linked list elements. Use the tools to add more styles as needed.
<div class="bd-example"><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item active" aria-current="page">Home</li></ol></nav><nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">Library</li></ol></nav><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></div>
RESULT
Dividers #
In CSS, dividers are added automatically through ::before and content. They can be altered using the local CSS custom property --bs-breadcrumb-divider, the Sass variable $breadcrumb-divider, or, if necessary, $breadcrumb-divider-flipped for the RTL equivalent. As a fallback to the custom property, Sass variable by default is used. In this manner, obtain a global divider that can be altered whenever required without having to recompile CSS.
<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">Library</li></ol></nav>
RESULT
Dividers with toggle breadcrumb.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#" contenteditable="false" style="cursor: pointer;">Home</a></li>
<li class="breadcrumb-item position-relative">
<button type="button" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
RESULT
The quote function is necessary to create the quotations around a string when editing with Sass. Using > as the divider, for instance, you could do this:
$breadcrumb-divider: quote(">");
It’s also possible to use an embedded SVG icon. Apply it via our CSS custom property, or use the Sass variable.
<, > and #, must be URL-encoded or escaped. We do this with the $breadcrumb-divider variable using our escape-svg() Sass function. When customizing the CSS variable, you must handle this yourself. Read Kevin Weber’s explanations on CodePen for more info.
<nav style="--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
RESULT
It’s also possible to use an embedded SVG icon with toggle.
<nav
style="--bs-breadcrumb-divider: url("data:image/svg + xml, %3Csvgxmlns='http://www.w3.org/2000/svg'width='8'height='8'%3E%3Cpathd='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z'fill='%236c757d'/%3E%3C/svg%3E");"
aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item position-relative">
<button type="button" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
...
</button>
<ul class="dropdown-menu" style="">
<li><a class="dropdown-item" href="#" contenteditable="false" style="cursor: pointer;">Action</a></li>
<li><a class="dropdown-item" href="#" contenteditable="false" style="cursor: pointer;">Another action</a></li>
<li><a class="dropdown-item" href="#" contenteditable="false" style="cursor: pointer;">Something else here</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#" contenteditable="false" style="cursor: pointer;">Separated link</a></li>
</ul>
</li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
RESULT
Accessibility #
Since breadcrumbs serve as a navigational aid, it's a good idea to include a descriptive label, such as aria-label="breadcrumb," to define the kind of navigation offered by the
See the ARIA Authoring Practices Guide breadcrumb pattern for further details.
CSS #
Variables #
Added in v1.0.2Breadcrumbs now leverage local CSS variables on.breadcrumb for improved real-time customization as part of UX4G's growing CSS variables strategy. Sass is used to set the values for the CSS variables, therefore Sass customization is still available.
$badge-font-size: .75em;
$badge-font-weight: $font-weight-bold; --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
@include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
$badge-color: $white;
$badge-padding-y: .35em;
$badge-padding-x: .65em;
$badge-border-radius: $border-radius;Sass variables #
$breadcrumb-font-size: null;
$breadcrumb-padding-y: 0;
$breadcrumb-padding-x: 0;
$breadcrumb-item-padding-x: .5rem;
$breadcrumb-margin-bottom: 1rem;
$breadcrumb-bg: null;
$breadcrumb-divider-color: $gray-600;
$breadcrumb-active-color: $gray-600;
$breadcrumb-divider: quote("/");
$breadcrumb-divider-flipped: $breadcrumb-divider;
$breadcrumb-border-radius: null;