Breadcrumbs

Breadcrumbs provide a sense of where we are in the site structure with hyperlinks to previous areas in that structure. Our component also provides a specific "Back link" variation

React Component

Default

Back Link Variation

Progress Bar Variation

Sage Component

SageBreadcrumbs

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Default"
  } %>
<% end %>
<%= sage_component SageBreadcrumbs, {
  items: [
    {
      text: "Settings",
      url: "https://kajabi.com"
    },
    {
      text: "Domain Settings",
      url: "https://kajabi.com"
    },
    {
      text: "Domain Setup",
      url: "https://kajabi.com",
      disabled: true,
    }
  ]
} %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Back Link Variation"
  } %>
<% end %>
<%= sage_component SageBreadcrumbs, {
  items: [
    {
      text: "Settings",
      url: "#"
    }
  ]
} %>

<%= sage_component SageCardBlock, {} do %>
  <%= sage_component SageBadge, {
    color: "draft",
    value: "Progress Bar Variation"
  } %>
<% end %>
<%= sage_component SageBreadcrumbs, {
  is_progressbar: true,
  items: [
    {
      text: "Step 1 of 3",
      url: "#"
    },
    {
      text: "Step 2 of 3",
      url: "#",
      is_current: true
    },
    {
      text: "Step 3 of 3",
      url: "#"
    }
  ]
} %>

Property	Description	Type	Default
`has_back_icon`	Whether or not to show the back icon before the first item.	Boolean	`false`
`is_progressbar`	Whether or not to show the breadcrumbs in a progress like fashion.	Boolean	`false`
`items` required	The set of items to display. Array of items following schema.	`Array<{ url: String, text: String, is_current: String }>`	`nil`