CSS Components / Breadcrumbs

Breadcrumbs

This component has been deprecated

See the Breadcrumb component in Garden's @zendeskgarden/react-breadcrumbs package for the latest updates.

The .c-breadcrumb component classes are used to style breadcrumb navigation. Use Bedrock CSS to reset styling for embedded anchor tags.

Basic Structure

The breadcrumb CSS classes correspond with the following canonical structure.

  • <ol class="c-breadcrumb">
    • <li class="c_breadcrumb__item">
      • <a href="...">Link
    • etc.
    • <li class="c_breadcrumb__item is-current">Current

WAI-ARIA authoring practices indicate that this breadcrumb trail should be contained within a labeled navigation landmark region. See the playground example below for details.

Demo

Playground