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
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(">");
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.1Breadcrumbs 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;