Breadcrumb

Basic Usage
Home / 
Components / 
Navigation / 
Breadcrumb
<prism-breadcrumb>
  <prism-breadcrumb-item>Home</prism-breadcrumb-item>
  <prism-breadcrumb-item>Components</prism-breadcrumb-item>
  <prism-breadcrumb-item>Navigation</prism-breadcrumb-item>
  <prism-breadcrumb-item>Breadcrumb</prism-breadcrumb-item>
</prism-breadcrumb>
Custom Separator
Home > 
Navigation > 
Breadcrumb
<prism-breadcrumb separator=">">
  <prism-breadcrumb-item>Home</prism-breadcrumb-item>
  <prism-breadcrumb-item>Navigation</prism-breadcrumb-item>
  <prism-breadcrumb-item>Breadcrumb</prism-breadcrumb-item>
</prism-breadcrumb>
With Icons
 Home 
 / 
Components / 
Breadcrumb
<prism-breadcrumb>
  <prism-breadcrumb-item href="/">
    <div class="flex items-center gap-1">
      <prism-icon name="home-4-line" size="14"></prism-icon>
      Home
    </div>
  </prism-breadcrumb-item>
  <prism-breadcrumb-item href="/components">Components</prism-breadcrumb-item>
  <prism-breadcrumb-item>Breadcrumb</prism-breadcrumb-item>
</prism-breadcrumb>
Template Separator
Home/
Settings/
Account
<prism-breadcrumb [separator]="customSep">
  <prism-breadcrumb-item>Home</prism-breadcrumb-item>
  <prism-breadcrumb-item>Settings</prism-breadcrumb-item>
  <prism-breadcrumb-item>Account</prism-breadcrumb-item>
</prism-breadcrumb>

<ng-template #customSep>
  <span class="text-xs opacity-50">/</span>
</ng-template>
Breadcrumb ComponentNameTypeDefaultDescription
separatorstring | TemplateRef<void>'/'Custom separator between items.
Breadcrumb Item ComponentNameTypeDefaultDescription
hrefstringnullURL to navigate to when clicked.
targetstring'_self'Where to open the linked document.
Name	Type	Default	Description
href	string	null	URL to navigate to when clicked.
target	string	'_self'	Where to open the linked document.