Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Basic

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.

  • Home
  • Home
  • /
  • Library
  • Home
  • /
  • Library
  • /
  • Data

Density

The density prop decreases the height of the breadcrumb based upon 1 of 3 levels of density. default, comfortable, and compact and the bg-color prop change the backgroud color of the breadcrumb.

  • Home
  • Home
  • /
  • Library
  • Home
  • /
  • Library
  • /
  • Data

Divider

Breadcrumbs separator can be set using divider property.

  • Home
  • -
  • Library
  • -
  • Data

To customize the divider, use the divider slot.

  • Home
  • Library
  • Data
CONTENTS
  • Introduction

  • Basic

  • Divider

  • Density