Breadcrumb

Breadcrumb shows where a page sits in the hierarchy above it, and gives the reader a way back up. It renders a nav landmark around an ordered list, so a screen reader can jump straight to it and a search engine can read the trail.

The landmark names itself Breadcrumb, the last step carries aria-current, and the dividers are held out of the accessibility tree — a trail of three steps reads as three, not as five. Every one of those can be overridden: pass your own aria-label, or an aria-labelledby, and the default steps aside.

To create a breadcrumb, you will need to use the following components:

• Breadcrumb: The landmark and the list. It creates the context the rest read.
• BreadcrumbItem: One step of the trail — the list item the step lives in. It takes anything, not only a step.
• BreadcrumbButton: A step that can be activated: an anchor when it goes somewhere, a button when it does something.
• BreadcrumbDivider: The mark between two steps. It is decoration, and is hidden from assistive technology.

Usage

A breadcrumb is a list of steps with a divider between them. The last step is the page the reader is already on, so it is marked current rather than linked away.

<script>
	import { Breadcrumb, BreadcrumbItem, BreadcrumbButton, BreadcrumbDivider } from 'fluentui-svelte';
</script>

<Breadcrumb>
	<BreadcrumbItem>
		<BreadcrumbButton as="a" href="/">Home</BreadcrumbButton>
	</BreadcrumbItem>
	<BreadcrumbDivider />
	<BreadcrumbItem>
		<BreadcrumbButton as="a" href="/files">Files</BreadcrumbButton>
	</BreadcrumbItem>
	<BreadcrumbDivider />
	<BreadcrumbItem>
		<BreadcrumbButton current>Quarterly report</BreadcrumbButton>
	</BreadcrumbItem>
</Breadcrumb>

Size

size sets the type, the height and the divider of every step at once.

<Breadcrumb size="small">...</Breadcrumb>
<Breadcrumb size="medium">...</Breadcrumb>
<Breadcrumb size="large">...</Breadcrumb>

Icon

icon takes a snippet or a component and renders it beside the label, on the side iconPosition asks for.

<BreadcrumbItem>
  <BreadcrumbButton as="a" href="/files" icon={FolderRegular}>Files</BreadcrumbButton>
</BreadcrumbItem>

Current Step

current marks the step as the page the trail ends at. It announces aria-current and reads as text rather than as a way out, so the last step does not offer to take the reader where they already are.

<BreadcrumbItem>
  <BreadcrumbButton current>Quarterly report</BreadcrumbButton>
</BreadcrumbItem>

Overflow Menu

A step takes whatever you put in it, so a long trail folds its middle into a menu by making that menu a step of its own. Which steps fold is your call — slice the list wherever the layout needs it. The label on the menu button is yours to write, and it is worth writing: a trigger with only an icon says nothing to a screen reader.

<script>
  // Keep the root and the last two steps; everything between them goes into the menu.
  const head = trail.slice(0, 1);
  const folded = trail.slice(1, -2);
  const tail = trail.slice(-2);
</script>

<Breadcrumb>
  {#each head as item (item.name)}
    <BreadcrumbItem>
      <BreadcrumbButton as="a" href={item.href}>{item.name}</BreadcrumbButton>
    </BreadcrumbItem>
    <BreadcrumbDivider />
  {/each}

  <!-- A step takes whatever you put in it, so the menu is just another step. -->
  <BreadcrumbItem>
    <Menu>
      <MenuTrigger>
        {#snippet children({ state, menuTriggerProps })}
          <Button bind:ref={state.ref} {...menuTriggerProps} appearance="subtle" aria-label={`${folded.length} more steps`}>
            <MoreHorizontalRegular />
          </Button>
        {/snippet}
      </MenuTrigger>
      <MenuPopover>
        <MenuList>
          <!-- A step that goes somewhere is a link, in the menu as much as in the trail. -->
          {#each folded as item (item.name)}
            <MenuItem href={item.href}>{item.name}</MenuItem>
          {/each}
        </MenuList>
      </MenuPopover>
    </Menu>
  </BreadcrumbItem>
  <BreadcrumbDivider />

  {#each tail as item, index (item.name)}
    <BreadcrumbItem>
      {#if index === tail.length - 1}
        <BreadcrumbButton current>{item.name}</BreadcrumbButton>
      {:else}
        <BreadcrumbButton as="a" href={item.href}>{item.name}</BreadcrumbButton>
      {/if}
    </BreadcrumbItem>
    {#if index < tail.length - 1}
      <BreadcrumbDivider />
    {/if}
  {/each}
</Breadcrumb>

Focus Mode

focusMode decides how the focus walks the trail. tab, the default, leaves every step its own tab stop, which is what a reader expects of a row of links. arrow gives the whole trail a single tab stop and moves between steps with the arrow keys, with Home and End for the ends.

<Breadcrumb focusMode="arrow">...</Breadcrumb>

Component Props (Breadcrumb)

Component Props (BreadcrumbItem)

Component Props (BreadcrumbButton)

Component Props (BreadcrumbDivider)

Accessibility

Give the landmark your own aria-label when a page carries more than one trail, so each is distinguishable, or an aria-labelledby pointing at a heading you already render. The dividers are hidden, so the list reads as the number of steps it has, and the last step carries aria-current. A step with an icon and no label needs an aria-label of its own. Structured data is left to you: a search engine reads a trail through BreadcrumbList from schema.org, but the text of a step lives in your markup and the URLs live in your routing, so the trail you publish is yours to build.