Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Default
    • Configuration
    • API
      • Breadcrumb

    Breadcrumbs

    Breadcrumbs mark and communicate a user’s location in the product.

    Table of Contents
    • How to use it
      • Default
    • Configuration
    • API
      • Breadcrumb
    Used for this
    • To show the user where they are in a nested navigation
    • To provide a quick way to navigate to ancestor pages

    How to use it

    Default

    Breadcrumbs and the Anchor component work together. Each element (a “crumb” if you will) is separated from the others with an arrow.

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.5.3•View source•View on npm
    • Installnpm install @zendeskgarden/react-breadcrumbs
    • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
    • Importimport { Breadcrumb } from '@zendeskgarden/react-breadcrumbs'

    API

    Breadcrumb

    Extends HTMLAttributes<HTMLElement>

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2025