Kappa / Breadcrumbs

Simulation workspace

<script setup>
import { Breadcrumbs } from "@dicehub/kappa/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs.Root aria-label="Simulation path">
    <Breadcrumbs.List>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="/projects">Projects</Breadcrumbs.Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="/projects/rotor-study">Rotor study</Breadcrumbs.Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item>
        <Breadcrumbs.Page>Run 042</Breadcrumbs.Page>
      </Breadcrumbs.Item>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</template>

Installation

Barrel

import {
  Breadcrumbs,
  BreadcrumbsCurrent,
} from "@dicehub/kappa";

Granular

import {
  Breadcrumbs,
  BreadcrumbsCurrent,
  BreadcrumbsEllipsis,
  BreadcrumbsItem,
  BreadcrumbsLink,
  BreadcrumbsList,
  BreadcrumbsPage,
  BreadcrumbsRoot,
  BreadcrumbsSeparator,
} from "@dicehub/kappa/components/breadcrumbs";

Usage

Root renders a labelled navigation landmark, List preserves hierarchy as an ordered list, and Current is an alias of the noninteractive Page part.

Composition

Typical part hierarchy

Breadcrumbs.Root
└── Breadcrumbs.List
    ├── Breadcrumbs.Item
    │   └── Breadcrumbs.Link
    ├── Breadcrumbs.Separator
    ├── Breadcrumbs.Ellipsis
    └── Breadcrumbs.Item
        └── Breadcrumbs.Page / Breadcrumbs.Current

Root creates the navigation landmark. List and Item preserve the ordered hierarchy. Alternate linked ancestors with decorative separators, then end with Page or its Current alias for the active location.

Examples

Basic

Link each ancestor and render the current page as the final, noninteractive item.

<script setup>
import { Breadcrumbs } from "@dicehub/kappa/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs.Root>
    <Breadcrumbs.List>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="/workspace">Workspace</Breadcrumbs.Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="/simulations">Simulations</Breadcrumbs.Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item>
        <Breadcrumbs.Current>Run 042</Breadcrumbs.Current>
      </Breadcrumbs.Item>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</template>

Custom Separator

Replace the default direction-aware chevron through Separator's default slot.

<script setup>
import { Breadcrumbs } from "@dicehub/kappa/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs.Root aria-label="Dataset path">
    <Breadcrumbs.List>
      <Breadcrumbs.Item><Breadcrumbs.Link href="/data">Data</Breadcrumbs.Link></Breadcrumbs.Item>
      <Breadcrumbs.Separator><span aria-hidden="true">/</span></Breadcrumbs.Separator>
      <Breadcrumbs.Item><Breadcrumbs.Link href="/data/wind">Wind</Breadcrumbs.Link></Breadcrumbs.Item>
      <Breadcrumbs.Separator><span aria-hidden="true">/</span></Breadcrumbs.Separator>
      <Breadcrumbs.Item><Breadcrumbs.Page>inlet.csv</Breadcrumbs.Page></Breadcrumbs.Item>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</template>

Sizes

Use sm in dense toolbars and base for standard page context.

sm

base

<script setup>
import { Breadcrumbs } from "@dicehub/kappa/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs.Root
    v-for="size in ['sm', 'base']"
    :key="size"
    :size="size"
    :aria-label="`${size} breadcrumb path`"
  >
    <Breadcrumbs.List>
      <Breadcrumbs.Item><Breadcrumbs.Link href="/models">Models</Breadcrumbs.Link></Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item><Breadcrumbs.Link href="/cases">Cases</Breadcrumbs.Link></Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item><Breadcrumbs.Page>Run 042</Breadcrumbs.Page></Breadcrumbs.Item>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</template>

With Icons

Place decorative SVG beside visible labels. Do not replace every label with an icon.

<script setup>
import { Breadcrumbs } from "@dicehub/kappa/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs.Root aria-label="Resource path">
    <Breadcrumbs.List>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link href="/">
          <svg viewBox="0 0 256 256" width="16" height="16" fill="currentColor" aria-hidden="true">
            <path d="M219.31 108.68 139.31 28.68a16 16 0 0 0-22.62 0l-80 80A15.87 15.87 0 0 0 32 120v96a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-56h32v56a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-96a15.87 15.87 0 0 0-4.69-11.32ZM208 208h-48v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H48v-88l80-80 80 80Z" />
          </svg>
          Home
        </Breadcrumbs.Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item><Breadcrumbs.Link href="/projects">Projects</Breadcrumbs.Link></Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item><Breadcrumbs.Page>Current Project</Breadcrumbs.Page></Breadcrumbs.Item>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</template>

Long and Wrapping

Trails wrap without horizontal overflow. Preserve the full current location; collapse known ancestors when the surrounding layout requires a shorter trail.

<script setup>
import { Breadcrumbs } from "@dicehub/kappa/components/breadcrumbs";
</script>

<template>
  <div class="narrow-workspace-column">
    <Breadcrumbs.Root aria-label="Long simulation path">
      <Breadcrumbs.List>
        <Breadcrumbs.Item><Breadcrumbs.Link href="/projects">Projects</Breadcrumbs.Link></Breadcrumbs.Item>
        <Breadcrumbs.Separator />
        <Breadcrumbs.Item><Breadcrumbs.Link href="/projects/offshore-platform">Offshore platform verification</Breadcrumbs.Link></Breadcrumbs.Item>
        <Breadcrumbs.Separator />
        <Breadcrumbs.Item><Breadcrumbs.Page>Transient load case 2026-08</Breadcrumbs.Page></Breadcrumbs.Item>
      </Breadcrumbs.List>
    </Breadcrumbs.Root>
  </div>
</template>

<style scoped>
.narrow-workspace-column { inline-size: min(100%, 19rem); }
</style>

Collapsed

Ellipsis is a decorative indicator only. It does not measure, hide, or automatically collapse items; application code chooses which known ancestors to omit.

<script setup>
import { Breadcrumbs } from "@dicehub/kappa/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs.Root aria-label="Collapsed project path">
    <Breadcrumbs.List>
      <Breadcrumbs.Item><Breadcrumbs.Link href="/projects">Projects</Breadcrumbs.Link></Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item><Breadcrumbs.Ellipsis /></Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item><Breadcrumbs.Page>Run 042</Breadcrumbs.Page></Breadcrumbs.Item>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</template>

Compose the indicator inside a labelled Ark Menu trigger when omitted ancestors must remain navigable. Render menu destinations as the menu items themselves.

<script setup>
import { Menu } from "@ark-ui/vue/menu";
import { Breadcrumbs } from "@dicehub/kappa/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs.Root aria-label="Collapsed simulation path">
    <Breadcrumbs.List>
      <Breadcrumbs.Item><Breadcrumbs.Link href="/projects">Projects</Breadcrumbs.Link></Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item>
        <Menu.Root>
          <Menu.Trigger class="ancestor-trigger">
            <Breadcrumbs.Ellipsis />
            <span class="visually-hidden">Show collapsed ancestors</span>
          </Menu.Trigger>
          <Menu.Positioner>
            <Menu.Content aria-label="Collapsed ancestors">
              <Menu.Item value="models" as-child><a href="/models">Models</a></Menu.Item>
              <Menu.Item value="rotor" as-child><a href="/models/rotor">Rotor study</a></Menu.Item>
            </Menu.Content>
          </Menu.Positioner>
        </Menu.Root>
      </Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item><Breadcrumbs.Page>Run 042</Breadcrumbs.Page></Breadcrumbs.Item>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</template>

<style scoped>
.ancestor-trigger {
  display: inline-flex;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
</style>

Router Link

Use asChild so Link styles and attributes merge onto a router's semantic anchor.

<script setup>
import { RouterLink } from "vue-router";
import { Breadcrumbs } from "@dicehub/kappa/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs.Root aria-label="Application path">
    <Breadcrumbs.List>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link as-child>
          <RouterLink to="/projects">Projects</RouterLink>
        </Breadcrumbs.Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item><Breadcrumbs.Page>Run 042</Breadcrumbs.Page></Breadcrumbs.Item>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</template>

Right-to-left

Logical flow reverses the trail and the default directional separator.

<script setup>
import { Breadcrumbs } from "@dicehub/kappa/components/breadcrumbs";
</script>

<template>
  <Breadcrumbs.Root dir="rtl" aria-label="مسار المحاكاة">
    <Breadcrumbs.List>
      <Breadcrumbs.Item><Breadcrumbs.Link href="/projects">المشاريع</Breadcrumbs.Link></Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item><Breadcrumbs.Link href="/models">النماذج</Breadcrumbs.Link></Breadcrumbs.Item>
      <Breadcrumbs.Separator />
      <Breadcrumbs.Item><Breadcrumbs.Page>التشغيل ٠٤٢</Breadcrumbs.Page></Breadcrumbs.Item>
    </Breadcrumbs.List>
  </Breadcrumbs.Root>
</template>

Accessibility

Give each trail a concise aria-label or aria-labelledby; Root defaults to “Breadcrumb”.
Keep ancestor destinations as links and the final Page or Current as a noninteractive span with aria-current="page".
Separators and Ellipsis are decorative and hidden from assistive technology.
Breadcrumbs add no arrow-key model. Native links use the normal Tab order and Enter activation.
A collapsed ancestor trigger needs an accessible name and a real Menu with managed focus, Escape, and outside-dismiss behavior.
Keep a visible focus indicator and do not depend on separator shape or color to communicate hierarchy.

See the WAI-ARIA Breadcrumb Patternand Ark UI Menu guidance.

API Reference

Root

Forwards native navigation attributes, listeners, ARIA properties, and data attributes.

Prop	Type	Default	Description
`size`	`"sm" \| "base"`	`"base"`	Trail density.

Link

Forwards native anchor attributes and listeners. Use href for a native anchor or asChild with a router component that renders one anchor.

Prop	Type	Default	Description
`href`	`string`	`—`	Native destination. Required when Link renders its own anchor.
`asChild`	`boolean`	`false`	Merges Link attributes and styling onto one child anchor, such as RouterLink.

Parts

Part	Element	Description
`Root`	`nav`	Labelled navigation landmark; forwards native nav attributes.
`List`	`ol`	Ordered hierarchy of breadcrumb items.
`Item`	`li`	Wraps one link, current page, ellipsis, or composed control.
`Link`	`a`	Ancestor link; supports asChild for router-link composition.
`Page / Current`	`span`	Noninteractive current location with aria-current=page.
`Separator`	`li`	Decorative, assistive-technology-hidden separator with a replaceable default slot.
`Ellipsis`	`span`	Decorative collapsed-state indicator; it does not hide items by itself.

Exports

Export	Description
`Breadcrumbs`	Compound root with Root, List, Item, Link, Page, Current, Separator, and Ellipsis.
`BreadcrumbsRoot`	Unaugmented root component.
`BreadcrumbsList`	Ordered-list part.
`BreadcrumbsItem`	List-item part.
`BreadcrumbsLink`	Ancestor-link part.
`BreadcrumbsPage`	Current-page part.
`BreadcrumbsCurrent`	Alias of BreadcrumbsPage.
`BreadcrumbsSeparator`	Decorative separator part.
`BreadcrumbsEllipsis`	Decorative ellipsis part.
`BREADCRUMBS_SIZES`	Supported root-size values.
`BREADCRUMBS_DEFAULT_SIZE`	Default root size.
`isBreadcrumbsSize / resolveBreadcrumbsSize`	Runtime size guard and resolver.
`BreadcrumbsProps / BreadcrumbsSlots`	Public root and part TypeScript contracts.