Breadcrumb

Horizontal location trail. Earlier items are links; the last item is the current page and is not a link. In Chinese this component is 麵包屑.

The separator is a chevron, not a slash. Text is 13 / 14 / 15px at sm / md / lg.

Demos

Basic

The last item is aria-current="page". Separators are hidden from assistive tech.

HomeProductsBreadcrumb

<gk-breadcrumb>
  <gk-breadcrumb-item href="/">Home</gk-breadcrumb-item>
  <gk-breadcrumb-item href="/products">Products</gk-breadcrumb-item>
  <gk-breadcrumb-item>Breadcrumb</gk-breadcrumb-item>
</gk-breadcrumb>

Links and select

An item with href is a normal link and does not emit select. Without href, the item is a button and emits select with { key, item }.

HomeLibraryCurrent

<gk-breadcrumb>
  <gk-breadcrumb-item href="/">Home</gk-breadcrumb-item>
  <gk-breadcrumb-item key="library">Library</gk-breadcrumb-item>
  <gk-breadcrumb-item>Current</gk-breadcrumb-item>
</gk-breadcrumb>

Custom separator

The separator slot replaces the chevron. Any other separator string is drawn as text.

·OrganizationTeamPeople

<gk-breadcrumb>
  <span slot="separator">·</span>
  <gk-breadcrumb-item href="#org">Org</gk-breadcrumb-item>
  <gk-breadcrumb-item>Team</gk-breadcrumb-item>
</gk-breadcrumb>

Sizes

sm 13px, md 14px (default), lg 15px. The chevron grows slightly at lg.

HomeSettingsAccountHomeSettingsAccountHomeSettingsAccount

<gk-breadcrumb size="sm">...</gk-breadcrumb>
<gk-breadcrumb size="md">...</gk-breadcrumb>
<gk-breadcrumb size="lg">...</gk-breadcrumb>

Long trail

The trail wraps. Separators stay with the item they follow. Collapsing with max-items is a follow-up and is not in v1.

OrganizationAsia PacificTaiwanTaipei officeSpecialistsgk-ui Wave 5

<gk-breadcrumb>
  <gk-breadcrumb-item href="#a">Organization</gk-breadcrumb-item>
  <gk-breadcrumb-item href="#b">Asia Pacific</gk-breadcrumb-item>
  <gk-breadcrumb-item href="#c">Taiwan</gk-breadcrumb-item>
  <gk-breadcrumb-item href="#d">Taipei office</gk-breadcrumb-item>
  <gk-breadcrumb-item href="#e">Specialists</gk-breadcrumb-item>
  <gk-breadcrumb-item>gk-ui Wave 5</gk-breadcrumb-item>
</gk-breadcrumb>

In a page header

Place the trail above the page title.

ConsoleOrders#ORD-20481

Order detail

The trail sits above the heading as the location path.

<header>
  <gk-breadcrumb>
    <gk-breadcrumb-item href="#console">Console</gk-breadcrumb-item>
    <gk-breadcrumb-item href="#orders">Orders</gk-breadcrumb-item>
    <gk-breadcrumb-item>#ORD-20481</gk-breadcrumb-item>
  </gk-breadcrumb>
  <h2>Order detail</h2>
</header>

Alpine

<gk-breadcrumb>
  <gk-breadcrumb-item href="/">Home</gk-breadcrumb-item>
  <gk-breadcrumb-item>Current</gk-breadcrumb-item>
</gk-breadcrumb>

API

Breadcrumb props

Prop	Type	Default
separator	string	'chevron'
size	'sm' | 'md' | 'lg'	'md'
items	{ label, href?, key?, disabled? }[]	—

Slotted gk-breadcrumb-item children win over items. separator="chevron" draws the icon; any other string is text. The separator slot wins over both.

max-items collapsed overflow is not implemented in v1.

Breadcrumb item props

Prop	Type	Default
href	string	''
key	string	''
disabled	boolean	false

Slots

Name	Description
default	gk-breadcrumb-item children, or the item label
separator	Custom separator node. Cloned between items

Events

Name	Detail
select	{ key, item } when an item without href is activated. Links navigate natively and do not emit select.

CSS parts

root, list, item (data API), link, separator, current.

Accessibility

• The root is a nav. The accessible name follows the document language: “Breadcrumb” or 「麵包屑」. Set aria-label on the host to override it.
• Slotted trails use role="list". The data API renders an ol.
• The current item has aria-current="page" and is not a link.
• Separators are aria-hidden="true".
• Prior links use a soft underline in brand at 70% and a focus ring at 70% of --gk-color-focus-ring.