Winnie CSS
  1. Primitives
  2. breadcrumbs

breadcrumbs

A hierarchy of links to the current page in an application.

  1. Home /
  2. Dishes /
  3. Margherita Pizza 
<ol data-component="breadcrumbs">
  <li data-component="breadcrumb">
    <span data-slot="label">Home</span>
    <span data-slot="separator">/</span>
  </li>
  <li data-component="breadcrumb">
    <span data-slot="label">Dishes</span>
    <span data-slot="separator">/</span>
  </li>
  <li data-component="breadcrumb">
    <span data-slot="label">Margherita Pizza</span>
  </li>
</ol>

Import

Import just the breadcrumbs styles.

@import "@winnie-ui/css/spatial/breadcrumbs";
@import "@winnie-ui/css/visual/breadcrumbs";

Anatomy

Attach the appropriate data attributes in the structure below.

<ol data-component="breadcrumbs">
  <li data-component="breadcrumb">
    <a data-slot="link">
      <i data-slot="icon" />
      <span data-slot="label" />
    </a>
    <span data-slot="separator" />
  </li>
  <li data-component="breadcrumb">
    <i data-slot="icon" />
    <span data-slot="label" />
    <span data-slot="separator" />
  </li>
</ol>

Examples

Size

Use the data-size attribute to change the size.

  1. Home /
  2. Dishes /
  3. Margherita Pizza
  1. Home /
  2. Dishes /
  3. Margherita Pizza
  1. Home /
  2. Dishes /
  3. Margherita Pizza 
<ol data-component="breadcrumbs" data-size="<size>">
  ...
</ol>

With Links

Use the link slot with an anchor tag to turn a breadcrumb into a link.

  1. Home /
  2. Dishes /
  3. Margherita Pizza 
<ol data-component="breadcrumbs">
  ...
  <li data-component="breadcrumb">
    <a data-slot="link">
      <span data-slot="label">Dishes</span>
      <span data-slot="separator">/</span>
    </a>
  </li>
  ...
</ol>

Icon

Use the icon slot to add an icon before the label of the breadcrumb.

  1. Home /
  2. Dishes /
  3. Margherita Pizza 
<ol data-component="breadcrumbs">
  <li data-component="breadcrumb">
    <i class="home" data-slot="icon"></i>
    <span data-slot="label">Home</span>
    <span data-slot="separator">/</span>
  </li>
  ...
</ol>

Current

Use the data-current or aria-current attributes to identify the current pages’ breadcrumb.

  1. Home /
  2. Dishes /
  3. Margherita Pizza 
<ol data-component="breadcrumbs">
  <li data-component="breadcrumb" data-current="true">
    <span data-slot="label">Margherita Pizza</span>
  </li>
  ...
</ol>

Disabled

Use the data-disabled or aria-disabled attributes to mark a breadcrumb as disabled.

  1. Home /
  2. Dishes /
  3. Margherita Pizza 
<ol data-component="breadcrumbs">
  ...
  <li data-component="breadcrumb" data-disabled="true">
    <span data-slot="label">Dishes</span>
    <span data-slot="separator">/</span>
  </li>
  ...
</ol>

Reference

breadcrumbs

Groups all of the breadcrumb’s together.

AttributeValue
data-size"sm" | "md" | "lg"

breadcrumb

Groups all of the parts of the breadcrumb together.

AttributeValue
data-disabledboolean
data-currentboolean
ModifierDescription
hoveredWhen the breadcrumb is hovered with a mouse
pressedWhen the breadcrumb is pressed with a mouse or keyboard
disabledWhen the breadcrumb prevents user interaction
currentWhen the breadcrumb represents the current page in the application
Variable
--wui-breadcrumb-background-<?modifier>
--wui-breadcrumb-label-color-<?modifier>
--wui-breadcrumb-icon-color-<?modifier>
--wui-breadcrumb-separator-color