Skip to content

Breadcrumbs

The trail to the current page, shown in the topbar. The last item is the current page.

LayoutServer-rendered

Examples

Trail

Earlier crumbs are links; the last one is plain text. Phones show only the last two.

Light
Dark
Example
<Breadcrumbs
  items={[
    { label: 'Servers', href: '/servers' },
    { label: 'GitHub', href: '/servers/github' },
    { label: 'create_issue' },
  ]}
/>

Two levels

Example
<Breadcrumbs items={[{ label: 'Skills', href: '/skills' }, { label: 'pdf-forms' }]} />

Usage

Usage
import { Breadcrumbs } from '@switchboard/ui'

<Topbar
  breadcrumbs={
    <Breadcrumbs items={[{ label: 'Servers', href: routes.servers.index.href() }, { label: server.name }]} />
  }
/>

Props

Every component also takes mix, for css() and mixins applied after its own style.

Breadcrumbs

Breadcrumbs props
PropTypeDefaultDescription
items*{ label: string; href?: string }[]–Trail from the top level down. Omit href on the last item.

Also accepts every <nav> attribute.

Accessibility

  • Renders <nav aria-label="Breadcrumb"> around an ordered list.
  • The last item gets aria-current="page"; the "/" separators are CSS content, not text in the list.

Guidance

Do

  • Use the same names as the sidebar and page titles.
  • Keep the trail to three levels or fewer.

Don’t

  • Link the last crumb to the page you are on.
  • Repeat the workspace name as the first crumb.