Breadcrumbs

Where a view sits: a trail of ui-breadcrumb-item from the top down to the current view, in a navigation landmark. Every step but the current one holds a link; a chevron leads each step after the first. It wraps rather than scrolls, so every step stays reachable.

Default

A trail from the top down to the current view. Every step but the current one is a link.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-breadcrumbs/ui-breadcrumbs.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-breadcrumb-item/ui-breadcrumb-item.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-icon/ui-icon.html"
>

<ui-breadcrumbs>
  <ui-breadcrumb-item><a
      href="#home"
    >Home</a></ui-breadcrumb-item>
  <ui-breadcrumb-item><a
      href="#planning"
    ><ui-icon
        name="folder"
      ></ui-icon>Planning</a></ui-breadcrumb-item>
  <ui-breadcrumb-item
    current
  >Roadmap</ui-breadcrumb-item>
</ui-breadcrumbs>

<script setup>
  import { UiBreadcrumbItem, UiBreadcrumbs, UiIcon } from "@threadlabs/looma";
</script>

<template>
  <UiBreadcrumbs>
    <UiBreadcrumbItem><a
        href="#home"
      >Home</a></UiBreadcrumbItem>
    <UiBreadcrumbItem><a
        href="#planning"
      ><UiIcon
          name="folder"
        />Planning</a></UiBreadcrumbItem>
    <UiBreadcrumbItem
      :current="true"
    >Roadmap</UiBreadcrumbItem>
  </UiBreadcrumbs>
</template>

import { UiBreadcrumbItem, UiBreadcrumbs, UiIcon } from "@threadlabs/looma";

export default function Example() {
  return <UiBreadcrumbs>
    <UiBreadcrumbItem><a
        href="#home"
      >Home</a></UiBreadcrumbItem>
    <UiBreadcrumbItem><a
        href="#planning"
      ><UiIcon
          name="folder"
        />Planning</a></UiBreadcrumbItem>
    <UiBreadcrumbItem
      current
    >Roadmap</UiBreadcrumbItem>
  </UiBreadcrumbs>;
}

/** @jsxImportSource preact */
import { UiBreadcrumbItem, UiBreadcrumbs, UiIcon } from "@threadlabs/looma";

export default function Example() {
  return <UiBreadcrumbs>
    <UiBreadcrumbItem><a
        href="#home"
      >Home</a></UiBreadcrumbItem>
    <UiBreadcrumbItem><a
        href="#planning"
      ><UiIcon
          name="folder"
        />Planning</a></UiBreadcrumbItem>
    <UiBreadcrumbItem
      current
    >Roadmap</UiBreadcrumbItem>
  </UiBreadcrumbs>;
}

<script>
  import { UiBreadcrumbItem, UiBreadcrumbs, UiIcon } from "@threadlabs/looma";
</script>

<UiBreadcrumbs>
  <UiBreadcrumbItem><a
      href="#home"
    >Home</a></UiBreadcrumbItem>
  <UiBreadcrumbItem><a
      href="#planning"
    ><UiIcon
        name="folder"
      />Planning</a></UiBreadcrumbItem>
  <UiBreadcrumbItem
    current
  >Roadmap</UiBreadcrumbItem>
</UiBreadcrumbs>

import { Component } from "@angular/core";
import { UiBreadcrumbItem, UiBreadcrumbs, UiIcon } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiBreadcrumbs, UiBreadcrumbItem, UiIcon],
  template: `
    <nav
      ui-breadcrumbs
    >
      <li
        ui-breadcrumb-item
      ><a
          href="#home"
        >Home</a></li>
      <li
        ui-breadcrumb-item
      ><a
          href="#planning"
        ><span
            ui-icon
            name="folder"
          ></span>Planning</a></li>
      <li
        ui-breadcrumb-item
        [current]="true"
      >Roadmap</li>
    </nav>
  `,
})
export default class Example {}

Named trail

label names the navigation landmark, for a page with more than one trail.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-breadcrumbs/ui-breadcrumbs.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-breadcrumb-item/ui-breadcrumb-item.html"
>

<ui-breadcrumbs
  label="Folder path"
>
  <ui-breadcrumb-item><a
      href="#home"
    >Home</a></ui-breadcrumb-item>
  <ui-breadcrumb-item><a
      href="#planning"
    >Planning</a></ui-breadcrumb-item>
  <ui-breadcrumb-item><a
      href="#q3"
    >Q3</a></ui-breadcrumb-item>
  <ui-breadcrumb-item
    current
  >Launch checklist</ui-breadcrumb-item>
</ui-breadcrumbs>

<script setup>
  import { UiBreadcrumbItem, UiBreadcrumbs } from "@threadlabs/looma";
</script>

<template>
  <UiBreadcrumbs
    label="Folder path"
  >
    <UiBreadcrumbItem><a
        href="#home"
      >Home</a></UiBreadcrumbItem>
    <UiBreadcrumbItem><a
        href="#planning"
      >Planning</a></UiBreadcrumbItem>
    <UiBreadcrumbItem><a
        href="#q3"
      >Q3</a></UiBreadcrumbItem>
    <UiBreadcrumbItem
      :current="true"
    >Launch checklist</UiBreadcrumbItem>
  </UiBreadcrumbs>
</template>

import { UiBreadcrumbItem, UiBreadcrumbs } from "@threadlabs/looma";

export default function Example() {
  return <UiBreadcrumbs
    label="Folder path"
  >
    <UiBreadcrumbItem><a
        href="#home"
      >Home</a></UiBreadcrumbItem>
    <UiBreadcrumbItem><a
        href="#planning"
      >Planning</a></UiBreadcrumbItem>
    <UiBreadcrumbItem><a
        href="#q3"
      >Q3</a></UiBreadcrumbItem>
    <UiBreadcrumbItem
      current
    >Launch checklist</UiBreadcrumbItem>
  </UiBreadcrumbs>;
}

/** @jsxImportSource preact */
import { UiBreadcrumbItem, UiBreadcrumbs } from "@threadlabs/looma";

export default function Example() {
  return <UiBreadcrumbs
    label="Folder path"
  >
    <UiBreadcrumbItem><a
        href="#home"
      >Home</a></UiBreadcrumbItem>
    <UiBreadcrumbItem><a
        href="#planning"
      >Planning</a></UiBreadcrumbItem>
    <UiBreadcrumbItem><a
        href="#q3"
      >Q3</a></UiBreadcrumbItem>
    <UiBreadcrumbItem
      current
    >Launch checklist</UiBreadcrumbItem>
  </UiBreadcrumbs>;
}

<script>
  import { UiBreadcrumbItem, UiBreadcrumbs } from "@threadlabs/looma";
</script>

<UiBreadcrumbs
  label="Folder path"
>
  <UiBreadcrumbItem><a
      href="#home"
    >Home</a></UiBreadcrumbItem>
  <UiBreadcrumbItem><a
      href="#planning"
    >Planning</a></UiBreadcrumbItem>
  <UiBreadcrumbItem><a
      href="#q3"
    >Q3</a></UiBreadcrumbItem>
  <UiBreadcrumbItem
    current
  >Launch checklist</UiBreadcrumbItem>
</UiBreadcrumbs>

import { Component } from "@angular/core";
import { UiBreadcrumbItem, UiBreadcrumbs } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiBreadcrumbs, UiBreadcrumbItem],
  template: `
    <nav
      ui-breadcrumbs
      [label]="'Folder path'"
    >
      <li
        ui-breadcrumb-item
      ><a
          href="#home"
        >Home</a></li>
      <li
        ui-breadcrumb-item
      ><a
          href="#planning"
        >Planning</a></li>
      <li
        ui-breadcrumb-item
      ><a
          href="#q3"
        >Q3</a></li>
      <li
        ui-breadcrumb-item
        [current]="true"
      >Launch checklist</li>
    </nav>
  `,
})
export default class Example {}

Default

A link up to a place, or, with current, the view you are on.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-breadcrumbs/ui-breadcrumbs.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-breadcrumb-item/ui-breadcrumb-item.html"
>

<ui-breadcrumbs>
  <ui-breadcrumb-item><a
      href="#home"
    >Home</a></ui-breadcrumb-item>
  <ui-breadcrumb-item
    current
  >Roadmap</ui-breadcrumb-item>
</ui-breadcrumbs>

<script setup>
  import { UiBreadcrumbItem, UiBreadcrumbs } from "@threadlabs/looma";
</script>

<template>
  <UiBreadcrumbs>
    <UiBreadcrumbItem><a
        href="#home"
      >Home</a></UiBreadcrumbItem>
    <UiBreadcrumbItem
      :current="true"
    >Roadmap</UiBreadcrumbItem>
  </UiBreadcrumbs>
</template>

import { UiBreadcrumbItem, UiBreadcrumbs } from "@threadlabs/looma";

export default function Example() {
  return <UiBreadcrumbs>
    <UiBreadcrumbItem><a
        href="#home"
      >Home</a></UiBreadcrumbItem>
    <UiBreadcrumbItem
      current
    >Roadmap</UiBreadcrumbItem>
  </UiBreadcrumbs>;
}

/** @jsxImportSource preact */
import { UiBreadcrumbItem, UiBreadcrumbs } from "@threadlabs/looma";

export default function Example() {
  return <UiBreadcrumbs>
    <UiBreadcrumbItem><a
        href="#home"
      >Home</a></UiBreadcrumbItem>
    <UiBreadcrumbItem
      current
    >Roadmap</UiBreadcrumbItem>
  </UiBreadcrumbs>;
}

<script>
  import { UiBreadcrumbItem, UiBreadcrumbs } from "@threadlabs/looma";
</script>

<UiBreadcrumbs>
  <UiBreadcrumbItem><a
      href="#home"
    >Home</a></UiBreadcrumbItem>
  <UiBreadcrumbItem
    current
  >Roadmap</UiBreadcrumbItem>
</UiBreadcrumbs>

import { Component } from "@angular/core";
import { UiBreadcrumbItem, UiBreadcrumbs } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiBreadcrumbs, UiBreadcrumbItem],
  template: `
    <nav
      ui-breadcrumbs
    >
      <li
        ui-breadcrumb-item
      ><a
          href="#home"
        >Home</a></li>
      <li
        ui-breadcrumb-item
        [current]="true"
      >Roadmap</li>
    </nav>
  `,
})
export default class Example {}

With an icon

An icon slotted in the link sits with the step's name.

Code

<link
  rel="component"
  href="@threadlabs/looma/components/ui-breadcrumbs/ui-breadcrumbs.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-breadcrumb-item/ui-breadcrumb-item.html"
>
<link
  rel="component"
  href="@threadlabs/looma/components/ui-icon/ui-icon.html"
>

<ui-breadcrumbs>
  <ui-breadcrumb-item><a
      href="#planning"
    ><ui-icon
        name="folder"
      ></ui-icon>Planning</a></ui-breadcrumb-item>
  <ui-breadcrumb-item
    current
  ><ui-icon
      name="file-text"
    ></ui-icon>Roadmap</ui-breadcrumb-item>
</ui-breadcrumbs>

<script setup>
  import { UiBreadcrumbItem, UiBreadcrumbs, UiIcon } from "@threadlabs/looma";
</script>

<template>
  <UiBreadcrumbs>
    <UiBreadcrumbItem><a
        href="#planning"
      ><UiIcon
          name="folder"
        />Planning</a></UiBreadcrumbItem>
    <UiBreadcrumbItem
      :current="true"
    ><UiIcon
        name="file-text"
      />Roadmap</UiBreadcrumbItem>
  </UiBreadcrumbs>
</template>

import { UiBreadcrumbItem, UiBreadcrumbs, UiIcon } from "@threadlabs/looma";

export default function Example() {
  return <UiBreadcrumbs>
    <UiBreadcrumbItem><a
        href="#planning"
      ><UiIcon
          name="folder"
        />Planning</a></UiBreadcrumbItem>
    <UiBreadcrumbItem
      current
    ><UiIcon
        name="file-text"
      />Roadmap</UiBreadcrumbItem>
  </UiBreadcrumbs>;
}

/** @jsxImportSource preact */
import { UiBreadcrumbItem, UiBreadcrumbs, UiIcon } from "@threadlabs/looma";

export default function Example() {
  return <UiBreadcrumbs>
    <UiBreadcrumbItem><a
        href="#planning"
      ><UiIcon
          name="folder"
        />Planning</a></UiBreadcrumbItem>
    <UiBreadcrumbItem
      current
    ><UiIcon
        name="file-text"
      />Roadmap</UiBreadcrumbItem>
  </UiBreadcrumbs>;
}

<script>
  import { UiBreadcrumbItem, UiBreadcrumbs, UiIcon } from "@threadlabs/looma";
</script>

<UiBreadcrumbs>
  <UiBreadcrumbItem><a
      href="#planning"
    ><UiIcon
        name="folder"
      />Planning</a></UiBreadcrumbItem>
  <UiBreadcrumbItem
    current
  ><UiIcon
      name="file-text"
    />Roadmap</UiBreadcrumbItem>
</UiBreadcrumbs>

import { Component } from "@angular/core";
import { UiBreadcrumbItem, UiBreadcrumbs, UiIcon } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiBreadcrumbs, UiBreadcrumbItem, UiIcon],
  template: `
    <nav
      ui-breadcrumbs
    >
      <li
        ui-breadcrumb-item
      ><a
          href="#planning"
        ><span
            ui-icon
            name="folder"
          ></span>Planning</a></li>
      <li
        ui-breadcrumb-item
        [current]="true"
      ><span
          ui-icon
          name="file-text"
        ></span>Roadmap</li>
    </nav>
  `,
})
export default class Example {}

API

Package: @threadlabs/looma · Native root: nav

Attributes

Name	Description	Property	Type	Default	Allowed values
`label`	The navigation landmark's accessible name.	`label`	`string`	`Breadcrumb`	`—`

Framework props

Name	Type	Default	Allowed values
`label`	`string`	`Breadcrumb`	`—`

Events

No events.

Slots

Name	Purpose
`default`	Default child content.

Design tokens

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

Component tokens

No component tokens.

Shared tokens

Token	Fallback
`--ui-font-size-sm`	`—`
`--ui-space-1`	`—`
`--ui-space-2`	`—`
`--ui-text-muted`	`—`

One step in a Breadcrumbs trail: a link up to that place, or, with current, the view you are on (aria-current="page"). An icon slotted in the link sits with its name. See Breadcrumbs.

Package: @threadlabs/looma · Native root: li

Name	Description	Property	Type	Default	Allowed values
`current`	Marks the step as the view you are on: it is plain text with aria-current="page". Every other step holds a link.	`current`	`boolean`	`false`	`—`

Name	Type	Default	Allowed values
`current`	`boolean`	`false`	`—`

No events.

Name	Purpose
`default`	Default child content.

Set shared theme properties on a theme boundary. Component hooks apply only to their owning component.

No component tokens.

Token	Fallback
`--ui-font-medium`	`—`
`--ui-font-size-sm`	`—`
`--ui-space-1`	`—`
`--ui-space-2`	`—`
`--ui-text-muted`	`—`
`--ui-text-primary`	`—`
`--ui-text-secondary`	`—`

Breadcrumbs

Code

Code

Code

Code

API

Attributes

Framework props

Events

Slots

Design tokens

Component tokens

Shared tokens

Breadcrumb Item API

Attributes

Framework props

Events

Slots

Design tokens

Component tokens

Shared tokens