Breadcrumb for Svelte

Links for the parent pages, with this page at the end.

Use it when the screen has a parent worth returning to, such as a product inside a category. A Navigation Menu is the site-wide nav, not this path. In Svelte, Ark UI marks the current page so the last item is text, not a link.

Installation

Anatomy

Usage

<script lang="ts">
import {
  Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink,
  BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import {
  Menu, MenuContent, MenuGroup, MenuItem, MenuTrigger,
} from "@/components/ui/menu";
</script>

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink>
        {#snippet asChild(props)}
          <a {...props()} href="#">Home</a>
        {/snippet}
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <Menu positioning={{ placement: "bottom-start" }}>
        <MenuTrigger>
          {#snippet asChild(props)}
            <Button {...props()} size="icon-sm" variant="ghost">
              <BreadcrumbEllipsis />
              <span class="sr-only">Toggle menu</span>
            </Button>
          {/snippet}
        </MenuTrigger>
        <MenuContent>
          <MenuGroup>
            <MenuItem value="documentation">Documentation</MenuItem>
            <MenuItem value="themes">Themes</MenuItem>
            <MenuItem value="github">GitHub</MenuItem>
          </MenuGroup>
        </MenuContent>
      </Menu>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink>
        {#snippet asChild(props)}
          <a {...props()} href="#">Components</a>
        {/snippet}
      </BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Accessibility

Demos

Basic

Home, Components, and the current page sit in a row with the default separator, and the first two are links. The last is BreadcrumbPage, so it is text with the current-page state and not something you can activate. Use this shape whenever the trail is short enough to show in full. The ellipsis and the dropdown are for trails that do not fit.

Separator

A dot replaces the default chevron between crumbs. The icon is the separator's child, and it is hidden from assistive tech because the list already conveys the order. Swap the mark when the product has its own trail glyph. Use one style for the whole site, or the path starts to look assembled from different kits.

Dropdown

Components is a button that opens a menu of Documentation, Themes, and GitHub, sitting between Home and the current page. The menu is an ordinary menu inside a breadcrumb item, not a special breadcrumb part. Use it when a middle level has siblings the person might jump to, such as other sections under the same parent. If there is only one place to go, a plain link is enough.

Ellipsis

The middle of a long trail collapses to a horizontal ellipsis between Home and Components. It is a visual stand-in, not a control, so nothing opens when it is activated. Use it when you must show the start and the end but the middle levels do not fit. If those middle levels matter, put them in a menu on the ellipsis instead of leaving a dead mark.

Link

The crumbs are the router's link, so client navigation stays inside the app instead of a full load. Home and Components both point at real routes. Do this on any trail in an app with its own router. A plain anchor is fine when a full page load is acceptable, and the current page stays text either way.

Rtl

The trail is Arabic: a home link, a middle item, and the current page, with dots between them. The middle item opens a menu of sibling pages, aligned to the end of the line. dir on the breadcrumb is what reverses the order. The current page stays plain text, same as in the other trails.

FAQ

API Reference