Warp Design System

Appearance

Breadcrumbs - Styling ​

Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step.

ElementsreleasedReactreleasedVuereleased

Styling ​

Example showing an annotated example of a breadcrumbs component. There are three annotations: 1. highlighting the page name, 2. Highlighting the separator, and 3. highlighting the current page.

1. Page name ​

Text style: Body
Color: semantic/color/text/default

2. Separator ​

Text style: Body
Color: semantic/color/text/default

3. Current page ​

Text style: Body
Color: semantic/color/text/link

Layout and spacing ​

Example showing an annotated example of a breadcrumbs component. There are three annotations: 1. highlighting the page name, 2. Highlighting the separator, and 3. highlighting the current page.