Breadcrumb

Angular Bootstrap Breadcrumb indicates the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Examples

See the following Bootstrap Breadcrumb examples

html

<CDBBreadcrumb color="none">
    <li class="breadcrumb-item">
        <CDBLink class="p-0" to="/breadcrumb">Home</CDBLink>
    </li>
    <li class="breadcrumb-item">
        <CDBLink class="p-0" to="/breadcrumb">Library</CDBLink>
    </li>
    <li class="breadcrumb-item active">Data</li>
</CDBBreadcrumb>
<CDBBreadcrumb color="none">
    <li class="breadcrumb-item">
        <CDBLink class="p-0" to="/breadcrumb">Home</CDBLink>
    </li>
    <li class="breadcrumb-item active">Library</li>
</CDBBreadcrumb>
<CDBBreadcrumb color="none">
    <li class="breadcrumb-item active">Home</li>
</CDBBreadcrumb>

Breadcrumb with Icons

html

<CDBBreadcrumb color="none" class="align-items-center">
    <li class="breadcrumb-item">
        <CDBLink class="p-0" to="/breadcrumb">Home</CDBLink>
    </li>
    <CDBIcon class="mx-2 text-muted" [fas]=true icon="angle-double-right"></CDBIcon>
    <li class="breadcrumb-item">
        <CDBLink class="p-0" to="/breadcrumb">Library</CDBLink>
    </li>
    <CDBIcon class="mx-2 text-muted" [fas]=true icon="angle-double-right"></CDBIcon>
    <li class="breadcrumb-item active">Data</li>
</CDBBreadcrumb>
<CDBBreadcrumb color="none" class="align-items-center">
    <li class="breadcrumb-item">
        <CDBLink class="p-0" to="/breadcrumb">Home</CDBLink>
    </li>
    <CDBIcon class="mx-2 text-muted" [fas]=true icon="angle-double-right"></CDBIcon>
    <li class="breadcrumb-item active">Library</li>
</CDBBreadcrumb>
<CDBBreadcrumb color="none">
    <li class="breadcrumb-item active">Home</li>
</CDBBreadcrumb>

Breadcrumb with colors

html

<CDBBreadcrumb color="dark" class="align-items-center text-white">
    <li class="breadcrumb-item">
        <CDBLink class="p-0 text-white" to="/breadcrumb">Home</CDBLink>
    </li>
    <CDBIcon class="mx-2 text-muted" [fas]=true icon="angle-double-right"></CDBIcon>
    <li class="breadcrumb-item">
        <CDBLink class="p-0 text-white" to="/breadcrumb">Library</CDBLink>
    </li>
    <CDBIcon class="mx-2 text-muted" [fas]=true icon="angle-double-right"></CDBIcon>
    <li class="breadcrumb-item">Data</li>
</CDBBreadcrumb>
<CDBBreadcrumb class="align-items-center">
    <li class="breadcrumb-item">
        <CDBLink class="p-0 text-white" to="/breadcrumb">Home</CDBLink>
    </li>
    <CDBIcon class="mx-2 text-muted" [fas]=true icon="angle-double-right"></CDBIcon>
    <li class="breadcrumb-item">Library</li>
</CDBBreadcrumb>
<CDBBreadcrumb color="info">
    <li class="breadcrumb-item">Home</li>
</CDBBreadcrumb>

API

Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.

Contrast Breadcrumb Bootstrap Modules used

import {BreadcrumbModule } from 'cdbangular';

API Reference: Contrast Breadcrumb Bootstrap Inputs

The table below shows the possible input of the Breadcrumb component.

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
color	String	primary	Determines breadcrumb background color, accepts CDB predefined color classes: `primary` `secondary` `success` `danger` `warning` `info` `light` `dark`	color="primary"
light	Boolean	false	Sets font color to white	color="dark" light=true
uppercase	Boolean	false	Transforms breadcrumbs text to uppercase	color="secondary" uppercase=true

Accordion

ButtonGroup