Breadcrumb

BsBreadcrumb is a component which is used indicate the current page's location within a navigational hierarchy.

Update in v2.2.0

Overview

BsBreadcrumb is simple and lightweight component and can be customized with many options.

1. Home
2. Components
3. Breadcrumb

INFO

BsBreadcrumb originally used Bootstrap CSS classes. However, since v2.2.0, BsBreadcrumb no longer uses Bootstrap CSS. This improvement allows BsBreadcrumb to work seamlessly with the TailwindCSS and Bootstrap CSS frameworks.

Icons

Property prepend-icon is used to display an icon before the first breadcrumb label. Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled. Suffix _filled and _outlined_filled will display the same icon style variant.

Additionally you can use slot icon to display a custom icon.

1. Home
2. Components
3. Breadcrumb

1. Home
2. Components
3. Breadcrumb

1. Home
2. Components
3. Breadcrumb

Separators

Separator between label can be changed using property separator. Use a simple single character or embedded SVG icon to specify the value of the separator property.

1. Home
2. Components
3. Breadcrumb

1. Home
2. Components
3. Breadcrumb

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-breadcrumb for better customization.

Updated in v2.2.0

.md-breadcrumb {
  --md-breadcrumb-padding-x: #{vars.$breadcrumb-padding-x};
  --md-breadcrumb-padding-y: #{vars.$breadcrumb-padding-y};
  --md-breadcrumb-icon-color: inherit;
  --md-breadcrumb-font-size: inherit;
  --md-breadcrumb-font-weight: var(--font-weight-medium);
  --md-breadcrumb-line-height: #{vars.$breadcrumb-line-height};

  --md-breadcrumb-item-color: var(--foreground-subtle);
  --md-breadcrumb-item-active-color: inherit;
  --md-breadcrumb-item-hover-color: var(--link-color, #{colors.$primary-color});
  --md-breadcrumb-item-separator-color: var(--foreground-subtle-tertiary);
  --md-breadcrumb-item-spacing: #{vars.$breadcrumb-item-spacing};
}

API Reference

Property	Type	Default	Description
icon-size	Number		The size of icon to display, in pixel.
items required	TBreadcrumb[]		The data-source to build the breadcrumb.
prepend-icon	String		The icon to display before the first breadcrumb label. Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled.
separator	String		Change the default breadcrumb label's separator.
sticky	Boolean	false	If true, the breadcrumb will be positioned using sticky-top.
tag	String	'nav'	Change the default HTML tag to render the breadcrumb container.

TBreadcrumb

The data object to build breadcrumb data source has the following properties:

Property	Type	Description
label required	String	The breadcrumb item label.
href	String	Absolute or relative URL if not using vue-router.
location	RouterLinkProps	The navigation location target. This must be an object that satifies the properties of <RouterLink> component when using vue-router. This is a shortcut to create a <RouterLink> as part of item's label.
path	String	The route path for the navigation target. This is a shortcut to create a <RouterLink> as part of item's label. See vue-router for more information.
pathName	String	The path name for the navigation target. This is a shortcut to create a <RouterLink> as part of item's label. See vue-router for more information.
handler	VoidFunction	onClick event handler for this items's label. handler, location, pathName, path and href properties can't be mixed together. If all or some of the properties is defined, then handler will take priority. The priorities are sorted as follows: handler (highest priority), location, pathName, path, href (lowest priority).