Breadcrumbs

Breadcrumbs show hierarchy and navigational context for a user’s location within an app.

Property	Values	Default value	Required
state	default / hover / down / keyboard focus / drag and drop	default
is multiline	yes / no If true, the breadcrumb items will wrap to multiple lines.	no
size	m / l Controls the overall size of the breadcrumb component.	m
items	yes / no	no	no
separator	chevron / none The separator icon used between breadcrumb items.	chevron
is truncated	yes / no If true, the breadcrumb item is truncated and displayed as icon only.	no
size override	s / m / l / xl Overrides the size of the breadcrumb items when isMultiline is true.

{
  "slug": "breadcrumbs",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/breadcrumbs.json",
  "title": "Breadcrumbs",
  "description": "Breadcrumbs show hierarchy and navigational context for a user’s location within an app.",
  "meta": {
    "category": "navigation",
    "documentationUrl": "https://spectrum.adobe.com/page/breadcrumbs/"
  },
  "type": "object",
  "properties": {
    "state": {
      "type": "string",
      "enum": [
        "default",
        "hover",
        "down",
        "keyboard focus",
        "drag and drop"
      ],
      "default": "default"
    },
    "isMultiline": {
      "type": "boolean",
      "default": false,
      "description": "If true, the breadcrumb items will wrap to multiple lines."
    },
    "size": {
      "type": "string",
      "enum": [
        "m",
        "l"
      ],
      "default": "m",
      "description": "Controls the overall size of the breadcrumb component."
    },
    "items": {
      "type": "array",
      "description": "An array of breadcrumb items.",
      "items": {
        "type": "object",
        "properties": {
          "label": {
            "type": "string",
            "description": "The text displayed for the breadcrumb item."
          },
          "href": {
            "type": "string",
            "description": "Optional URL the breadcrumb item links to."
          },
          "isCurrent": {
            "type": "boolean",
            "description": "Indicates if the breadcrumb item represents the current page.",
            "default": false
          },
          "isDisabled": {
            "type": "boolean",
            "default": false
          }
        },
        "required": [
          "label"
        ]
      }
    },
    "separator": {
      "type": "string",
      "enum": [
        "chevron",
        "none"
      ],
      "default": "chevron",
      "description": "The separator icon used between breadcrumb items."
    },
    "isTruncated": {
      "type": "boolean",
      "default": false,
      "description": "If true, the breadcrumb item is truncated and displayed as icon only."
    },
    "sizeOverride": {
      "type": "string",
      "enum": [
        "s",
        "m",
        "l",
        "xl"
      ],
      "description": "Overrides the size of the breadcrumb items when isMultiline is true."
    }
  }
}