Breadcrumbs

Shows the current location in a navigational hierarchy.

Breadcrumbs web component

Shows the current location in a navigational hierarchy.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Styles

Use slash or arrow separators between breadcrumb items.

Home

Electronics

Phones

iPhone 15

Home

Electronics

Phones

iPhone 15

<noora-breadcrumbs style-variant="slash">
  <noora-breadcrumb-item icon="smart_home">Home</noora-breadcrumb-item>
  <noora-breadcrumb-item label="Products">
    <noora-dropdown-item value="electronics">Electronics</noora-dropdown-item>
    <noora-dropdown-item value="phones" selected>Phones</noora-dropdown-item>
  </noora-breadcrumb-item>
  <noora-breadcrumb-item>iPhone 15</noora-breadcrumb-item>
</noora-breadcrumbs>
<noora-breadcrumbs style-variant="arrow">
  <noora-breadcrumb-item icon="smart_home">Home</noora-breadcrumb-item>
  <noora-breadcrumb-item label="Products">
    <noora-dropdown-item value="electronics">Electronics</noora-dropdown-item>
    <noora-dropdown-item value="phones" selected>Phones</noora-dropdown-item>
  </noora-breadcrumb-item>
  <noora-breadcrumb-item>iPhone 15</noora-breadcrumb-item>
</noora-breadcrumbs>

Configurations

Breadcrumb paths can combine icons, avatars, links, and plain labels.

Tuist

Features

Authentication

Dashboard

Settings

Profile

Home

Documentation

Guides

Getting Started

<noora-breadcrumbs style-variant="slash">
  <noora-breadcrumb-item avatar avatar-color="blue">Tuist</noora-breadcrumb-item>
  <noora-breadcrumb-item label="iOS App" avatar avatar-color="green">
    <noora-dropdown-item value="feature" avatar avatar-color="orange">Features</noora-dropdown-item>
    <noora-dropdown-item value="auth" avatar avatar-color="purple" selected>Authentication</noora-dropdown-item>
  </noora-breadcrumb-item>
  <noora-breadcrumb-item avatar avatar-color="red">Login Screen</noora-breadcrumb-item>
</noora-breadcrumbs>
<noora-breadcrumbs style-variant="slash">
  <noora-breadcrumb-item icon="smart_home">Dashboard</noora-breadcrumb-item>
  <noora-breadcrumb-item>Settings</noora-breadcrumb-item>
  <noora-breadcrumb-item>Profile</noora-breadcrumb-item>
</noora-breadcrumbs>
<noora-breadcrumbs style-variant="arrow">
  <noora-breadcrumb-item icon="smart_home">Home</noora-breadcrumb-item>
  <noora-breadcrumb-item>Documentation</noora-breadcrumb-item>
  <noora-breadcrumb-item>Guides</noora-breadcrumb-item>
  <noora-breadcrumb-item>Getting Started</noora-breadcrumb-item>
</noora-breadcrumbs>

Badges

Add compact technology or category badges next to labels.

Tuist

iOS App

Android App

Cache

Organization

Alpha

Beta

Gamma

Settings

<noora-breadcrumbs style-variant="slash">
  <noora-breadcrumb-item avatar avatar-color="blue">Tuist</noora-breadcrumb-item>
  <noora-breadcrumb-item label="iOS App" badge-label="Xcode" badge-color="focus">
    <noora-dropdown-item value="ios" href="#" badge-label="Xcode" badge-color="focus" selected>iOS App</noora-dropdown-item>
    <noora-dropdown-item value="android" href="#" badge-label="Gradle" badge-color="success">Android App</noora-dropdown-item>
  </noora-breadcrumb-item>
  <noora-breadcrumb-item>Cache</noora-breadcrumb-item>
</noora-breadcrumbs>
<noora-breadcrumbs style-variant="slash">
  <noora-breadcrumb-item icon="smart_home">Organization</noora-breadcrumb-item>
  <noora-breadcrumb-item label="Project">
    <noora-dropdown-item value="alpha" href="#" badge-label="Xcode" badge-color="focus">Alpha</noora-dropdown-item>
    <noora-dropdown-item value="beta" href="#" badge-label="Gradle" badge-color="success" selected>Beta</noora-dropdown-item>
    <noora-dropdown-item value="gamma" href="#" badge-label="Xcode" badge-color="focus">Gamma</noora-dropdown-item>
  </noora-breadcrumb-item>
  <noora-breadcrumb-item>Settings</noora-breadcrumb-item>
</noora-breadcrumbs>

Dropdowns

Attach selectable alternatives to any breadcrumb item.

Team Alpha

Team Beta

Team Gamma

Team Delta

Project X

Company

Backend Team

Frontend Team

React Components

<noora-breadcrumbs style-variant="slash">
  <noora-breadcrumb-item label="Organization" icon="smart_home">
    <noora-dropdown-item value="team1">Team Alpha</noora-dropdown-item>
    <noora-dropdown-item value="team2">Team Beta</noora-dropdown-item>
    <noora-dropdown-item value="team3">Team Gamma</noora-dropdown-item>
    <noora-dropdown-item value="team4" selected>Team Delta</noora-dropdown-item>
  </noora-breadcrumb-item>
  <noora-breadcrumb-item>Project X</noora-breadcrumb-item>
</noora-breadcrumbs>
<noora-breadcrumbs style-variant="arrow">
  <noora-breadcrumb-item avatar avatar-color="blue">Company</noora-breadcrumb-item>
  <noora-breadcrumb-item label="Engineering">
    <noora-dropdown-item value="backend" avatar avatar-color="red">Backend Team</noora-dropdown-item>
    <noora-dropdown-item value="frontend" avatar avatar-color="green" selected>Frontend Team</noora-dropdown-item>
  </noora-breadcrumb-item>
  <noora-breadcrumb-item>React Components</noora-breadcrumb-item>
</noora-breadcrumbs>

Attributes

Attribute	Type or allowed values	Default	Description
`style-variant`	slash, arrow	`"slash"`	Controls the separator style.

Properties

Property	Type or allowed values	Default	Description
`items`	json	`[]`	Defines breadcrumbs programmatically when declarative noora-breadcrumb-item children are not used.

Events

Event	Type	Description
`noora-open-change`	`CustomEvent<{ index: number; open: boolean }>`	Emitted when a breadcrumb menu opens or closes.
`noora-select`	`CustomEvent<{ index: number; item: Record<string, unknown>; value: unknown }>`	Emitted when a breadcrumb menu item is selected.

Slots

Name	Description
`default`	Declarative noora-breadcrumb-item children.

Styling parts

Name	Description
`breadcrumbs`	The breadcrumb container.