Developer mode
Opens components on the React tab by default.
Your bookmarks

Breadcrumbs

Shows where the user is within the app hierarchy.

As users navigate through your app, they’ll want to know where they are and how to get back to where they were. Use breadcrumbs to show their history and enable them to go up the hierarchy back to the start.

Breadcrumbs are useful for navigation history but shouldn’t be used for steps in a process including steps in the future. For that, use the planned Steps component.

Component status

Figma
Released
Web (React)
Developing
Developing redesign
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

Content structure

Desktop

Back button: allows users to easily go back in the path; root item: usually the name of your product; full path: shows where the current page lies in the sitemaps; current page: shows the name of the page where the user currently is.

Mobile

Back button: allows users to easily go back one step in the path.

Guidelines

Clearly present position

Users may come to a given screen through different flows (such as an external link or search). So it’s important that they always know where in your structure they are.

Use breadcrumbs to show the position and that there are other screens in your hierarchy. This helps them find related screens and navigate through your hierarchy.

Show only parents

Breadcrumbs are useful for showing how to navigate up in a hierarchy. They display the current screen as the final item in the list to make it clear where the user is.

There are scenarios where you might want to show children or other screens lower in the hierarchy, such as steps in a signup process. We are preparing a Steps component for these cases.

Look & feel

Responsive design

In large spaces like a desktop screen, it’s possible to show the entire breadcrumbs path without cluttering up the screen.

import Breadcrumbs, { BreadcrumbsItem } from "@kiwicom/orbit-components/lib/Breadcrumbs";
<Breadcrumbs>
      <BreadcrumbsItem
        href="https://orbit.kiwi/"
        onClick={event => console.log(`Clicked first breadcrumbs item`)}
      >
        Orbit.kiwi
      </BreadcrumbsItem>
      <BreadcrumbsItem
        href="https://orbit.kiwi/components/"
        onClick={event => console.log(`Clicked second breadcrumbs item`)}
      >
        Components
      </BreadcrumbsItem>
      <BreadcrumbsItem>Breadcrumbs</BreadcrumbsItem>
    </Breadcrumbs>

When the screen gets smaller, it becomes impossible to fit the entire path on one line. That’s why breadcrumbs on smaller screens show only one option: going back to the immediate parent.

import Breadcrumbs, { BreadcrumbsItem } from "@kiwicom/orbit-components/lib/Breadcrumbs";
<Breadcrumbs>
      <BreadcrumbsItem
        href="https://orbit.kiwi/"
        onClick={event => console.log(`Clicked first breadcrumbs item`)}
      >
        Orbit.kiwi
      </BreadcrumbsItem>
      <BreadcrumbsItem
        href="https://orbit.kiwi/components/"
        onClick={event => console.log(`Clicked second breadcrumbs item`)}
      >
        Components
      </BreadcrumbsItem>
      <BreadcrumbsItem>Breadcrumbs</BreadcrumbsItem>
    </Breadcrumbs>

This way users have a clear tool for navigating up in the hierarchy.