Ynex - Breadcrumbs

Example

<nav aria-label="breadcrumb">
     <Breadcrumb>
         <Breadcrumb.Item active  aria-current="page">Home</Breadcrumb.Item>
     </Breadcrumb>
 </nav>

 <nav aria-label="breadcrumb">
     <Breadcrumb>
         <Breadcrumb.Item><Link href="#!">Home</Link></Breadcrumb.Item>
         <Breadcrumb.Item active aria-current="page">Library</Breadcrumb.Item>
     </Breadcrumb>
 </nav>

 <nav aria-label="breadcrumb">
     <Breadcrumb className="mb-0">
         <Breadcrumb.Item><Link href="#!">Home</Link></Breadcrumb.Item>
         <Breadcrumb.Item><Link href="#!">Library</Link></Breadcrumb.Item>
         <Breadcrumb.Item active  aria-current="page">Data</Breadcrumb.Item>
     </Breadcrumb>
 </nav>

Example1

<nav aria-label="breadcrumb">
<Breadcrumb className="breadcrumb-example1">
    <Breadcrumb.Item active  aria-current="page">Home</Breadcrumb.Item>
</Breadcrumb>
</nav>

<nav aria-label="breadcrumb">
<Breadcrumb className="breadcrumb-example1">
    <Breadcrumb.Item><Link href="#!">Home</Link></Breadcrumb.Item>
    <Breadcrumb.Item active  aria-current="page">Library</Breadcrumb.Item>
</Breadcrumb>
</nav>

<nav aria-label="breadcrumb">
<Breadcrumb className="breadcrumb-example1 mb-0">
    <Breadcrumb.Item><Link href="#!">Home</Link></Breadcrumb.Item>
    <Breadcrumb.Item><Link href="#!">Library</Link></Breadcrumb.Item>
    <Breadcrumb.Item active  aria-current="page">Data</Breadcrumb.Item>
</Breadcrumb>
</nav>

Dividers

 <nav 
    // style="--bs-breadcrumb-divider: '~';"
 aria-label="breadcrumb">
    <Breadcrumb className="mb-0">
        <Breadcrumb.Item><Link href="#!">Home</Link></Breadcrumb.Item>
        <Breadcrumb.Item active className="active" aria-current="page">Library</Breadcrumb.Item>
    </Breadcrumb>
</nav>

Embedded SVG icon

  <nav 
    aria-label="breadcrumb">
    <Breadcrumb className=" mb-0">
        <Breadcrumb.Item><Link href="#!">Home</Link></Breadcrumb.Item>
        <Breadcrumb.Item active className="active embedded-breadcrumb" aria-current="page">Library</Breadcrumb.Item>
    </Breadcrumb>
</nav>

Breadcrumb Style-1

<nav aria-label="breadcrumb">
 <Breadcrumb className="breadcrumb breadcrumb-style1 mb-0">
     <Breadcrumb.Item><Link href="#!">Home</Link></Breadcrumb.Item>
     <Breadcrumb.Item><Link href="#!">Library</Link></Breadcrumb.Item>
     <Breadcrumb.Item active className="active" aria-current="page">Data</Breadcrumb.Item>
 </Breadcrumb>
 </nav>

Breadcrumb Style-2

<nav aria-label="breadcrumb">
<Breadcrumb className="breadcrumb breadcrumb-style2 mb-0">
    <Breadcrumb.Item><a href="#!"><i className="ti ti-home-2 me-1 fs-15 d-inline-block"></i>Home</a></Breadcrumb.Item>
    <Breadcrumb.Item><a href="#!"><i className="ti ti-apps me-1 fs-15 d-inline-block"></i>About</a></Breadcrumb.Item>
    <Breadcrumb.Item active className="active" aria-current="page">Services</Breadcrumb.Item>
</Breadcrumb>
    </nav>

Background colors

  <nav
//  style="--bs-breadcrumb-divider: '';"
 aria-label="breadcrumb">
    <Breadcrumb className="breadcrumb mb-0">
        <Breadcrumb.Item><Link href="#!">Home</Link></Breadcrumb.Item>
        <Breadcrumb.Item active className="active" aria-current="page">Library</Breadcrumb.Item>
    </Breadcrumb>
</nav>

Switcher

Breadcrumb