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

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