Usage

import { Breadcrumb } from '@pillar-ui/core'

<Breadcrumb />

Examples

Separator

import { Breadcrumb, BreadcrumbItem } from '@pillar-ui/core'
import { Minus } from '@pillar-ui/icons'

const breadcrumbsItems = [
  { name: 'components', link: '../..', current: false },
  { name: 'base-ui', link: '../', current: false },
  { name: 'breadcrumb', link: './', current: true },
]

export const BreadcrumbSeparator = () => {
  const items = breadcrumbsItems.map(({ name, link, current }) => (
    <BreadcrumbItem current={current} key={name} href={link}>
      {name}
    </BreadcrumbItem>
  ))

  return (
    <>
      <Breadcrumb>{items}</Breadcrumb>
      <Breadcrumb separator="*">{items}</Breadcrumb>
      <Breadcrumb separator={<Minus width={10} />}>{items}</Breadcrumb>
    </>
  )
}

Color

Default

b

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

import { Breadcrumb, BreadcrumbItem } from '@pillar-ui/core'

const breadcrumbsItems = [
  { name: 'Home', link: '.', current: false },
  { name: 'base-ui', link: '..', current: false },
  { name: 'components', link: '../..', current: false },
  { name: 'buttons', link: '../../..', current: true },
]

export const BreadcrumbColor = () => {
  const items = breadcrumbsItems.map(({ name, link, current }) => (
    <BreadcrumbItem current={current} key={name} href={link}>
      {name}
    </BreadcrumbItem>
  ))
  return (
    <>
      <Breadcrumb color="d">{items}</Breadcrumb>
      <Breadcrumb color="w">{items}</Breadcrumb>
      <Breadcrumb color="su">{items}</Breadcrumb>
      <Breadcrumb color="se">{items}</Breadcrumb>
      <Breadcrumb color="p">{items}</Breadcrumb>
      <Breadcrumb color="b">{items}</Breadcrumb>
      <Breadcrumb color="i">{items}</Breadcrumb>
    </>
  )
}

Icons

import { Breadcrumb, BreadcrumbItem } from '@pillar-ui/core'
import { Anchor, Home, Mouse, Palette } from '@pillar-ui/icons'

const breadcrumbsItems = [
  { name: 'home', link: '.', icon: <Home width={16} />, current: false },
  { name: 'base-ui', link: '..', icon: <Palette width={16} />, current: false },
  { name: 'components', link: '../..', icon: <Anchor width={16} />, current: false },
  { name: 'button', link: '../../..', icon: <Mouse width={16} />, current: true },
]

export const BreadcrumbIcon = () => {
  return (
    <>
      <Breadcrumb>
        {breadcrumbsItems.map(({ name, link, icon, current }) => (
          <BreadcrumbItem key={name} href={link} current={current}>
            {name}
            {icon}
          </BreadcrumbItem>
        ))}
      </Breadcrumb>

      <Breadcrumb>
        {breadcrumbsItems.map(({ name, link, icon, current }) => (
          <BreadcrumbItem key={name} href={link} current={current}>
            {icon}
            {name}
          </BreadcrumbItem>
        ))}
      </Breadcrumb>
    </>
  )
}

Sizes

Default

4

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

import { Breadcrumb, BreadcrumbItem } from '@pillar-ui/core'

const breadcrumbsItems = [
  { name: 'components', link: '../..', current: false },
  { name: 'base-ui', link: '../', current: false },
  { name: 'breadcrumb', link: './', current: true },
]

export const BreadcrumbSize = () => {
  const items = breadcrumbsItems.map(({ name, link, current }) => (
    <BreadcrumbItem current={current} key={name} href={link}>
      {name}
    </BreadcrumbItem>
  ))
  return (
    <>
      <Breadcrumb size="1">{items}</Breadcrumb>
      <Breadcrumb size="2">{items}</Breadcrumb>
      <Breadcrumb size="3">{items}</Breadcrumb>
      <Breadcrumb size="4">{items}</Breadcrumb>
      <Breadcrumb size="5">{items}</Breadcrumb>
      <Breadcrumb size="6">{items}</Breadcrumb>
      <Breadcrumb size="7">{items}</Breadcrumb>
      <Breadcrumb size="8">{items}</Breadcrumb>
      <Breadcrumb size="9">{items}</Breadcrumb>
    </>
  )
}

As

import { Breadcrumb, BreadcrumbItem } from '@pillar-ui/core'
import Link from 'next/link'

const breadcrumbsItems = [
  { name: 'Home', link: '.', current: false },
  { name: 'base-ui', link: '..', current: false },
  { name: 'components', link: '../..', current: false },
  { name: 'buttons', link: '../../..', current: true },
]

export const BreadcrumbAs = () => {
  const aItems = breadcrumbsItems.map(({ name, link, current }) => (
    <BreadcrumbItem current={current} key={name} href={link}>
      {name}
    </BreadcrumbItem>
  ))
  const linkItems = breadcrumbsItems.map(({ name, link, current }) => (
    <BreadcrumbItem as={Link} current={current} key={name} href={link}>
      {name}
    </BreadcrumbItem>
  ))
  const buttonItems = breadcrumbsItems.map(({ name, link, current }) => (
    <BreadcrumbItem as="button" current={current} key={name}>
      {name}
    </BreadcrumbItem>
  ))
  return (
    <>
      <Breadcrumb>{aItems}</Breadcrumb>
      <Breadcrumb>{linkItems}</Breadcrumb>
      <Breadcrumb>{buttonItems}</Breadcrumb>
    </>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default transform of the Breadcrumb */
--breadcrumb-transform: capitalize;
/* Change the default decoration of the Breadcrumb */
--breadcrumb-decoration: none;
/* Change the default size of the Breadcrumb */
--breadcrumb-size: 0.875em;
/* Change the default padding of the Breadcrumb */
--breadcrumb-pad: 0;