Breadcrumb

Two steps

Links up; the last step is the page.

[
    Crumb { text: "Service desk".into(), href: Some("#queue".into()) },
    Crumb { text: "Queue".into(), href: None },
][..]

Three steps

Each step above the page is a link.

[
    Crumb { text: "Components".into(), href: Some("/ui/components".into()) },
    Crumb { text: "Forms".into(), href: Some("#forms".into()) },
    Crumb { text: "Field".into(), href: None },
][..]

One step

At the top of an app the crumb is just the page.

[Crumb { text: "Dashboard".into(), href: None }][..]

On the Mac

The same vocabulary drawn by Ocean UI's native face (egui on Metal), as the gallery's snapshot.

Use it

use ocean_ui_core::Crumb;
[Crumb { text: "Tickets".into(), href: Some("/tickets".into()) }, Crumb { text: "T-1042".into(), href: None }]

use ocean_ui_native::{Show, core::Crumb, widgets::Breadcrumb};
let crumb = |text: &str, href: Option<&str>| Crumb { text: text.into(), href: href.map(Into::into) };
Breadcrumb(vec![crumb("Code", Some("/git/code")), crumb("main.rs", None)]).show(ui);

Cargo feature base of ocean-ui-core, ocean-ui-web and ocean-ui-native; available since 2026-10-29.

Props

Accessibility

• The trail is a nav landmark named Breadcrumb holding an ordered list, so its length and order are announced.
• The last step says aria-current="page" and is plain text, not a link.
• A step before the last without an href is plain text too.

Related

• Page head
• Top bar
• Sidebar

Markdown

The same page as Markdown, for an agent or a pull request.

# Breadcrumb

The path from the top of the app to this page, as links up with the current page last.

A breadcrumb is a list of Crumb steps, each with its words and an optional address. Every step with an href is a link up; the last step is the current page, so give it no href (the web face never makes it a link). Use it on pages more than one level deep.

## Use it

Web:

```rust
use ocean_ui_core::Crumb;
[Crumb { text: "Tickets".into(), href: Some("/tickets".into()) }, Crumb { text: "T-1042".into(), href: None }]
```

Native:

```rust
use ocean_ui_native::{Show, core::Crumb, widgets::Breadcrumb};
let crumb = |text: &str, href: Option<&str>| Crumb { text: text.into(), href: href.map(Into::into) };
Breadcrumb(vec![crumb("Code", Some("/git/code")), crumb("main.rs", None)]).show(ui);
```

Cargo feature `base`; since 2026-10-29.

## Props

| Name | Type | Default | What |
|---|---|---|---|
| `text` | `String` | `—` | The step's words, the page's short title. |
| `href` | `Option<String>` | `None` | The step's address; the current page has none. |

On the Mac: ![Breadcrumb, dark](/ui/native/breadcrumb-dark.png) ![Breadcrumb, light](/ui/native/breadcrumb-light.png)

## Examples

### Two steps

Links up; the last step is the page.

```rust
[
    Crumb { text: "Service desk".into(), href: Some("#queue".into()) },
    Crumb { text: "Queue".into(), href: None },
][..]
```

### Three steps

Each step above the page is a link.

```rust
[
    Crumb { text: "Components".into(), href: Some("/ui/components".into()) },
    Crumb { text: "Forms".into(), href: Some("#forms".into()) },
    Crumb { text: "Field".into(), href: None },
][..]
```

### One step

At the top of an app the crumb is just the page.

```rust
[Crumb { text: "Dashboard".into(), href: None }][..]
```

## Accessibility

- The trail is a nav landmark named Breadcrumb holding an ordered list, so its length and order are announced.
- The last step says aria-current="page" and is plain text, not a link.
- A step before the last without an href is plain text too.

## Related

- [Page head](/ui/components/page-head.md)
- [Top bar](/ui/components/topbar.md)
- [Sidebar](/ui/components/sidebar.md)