Breadcrumb | Park UI

Installation

npx @park-ui/cli add breadcrumb

Add Component

Copy the code snippet below into you components folder.

'use client'
import { ark } from '@ark-ui/react/factory'
import { ChevronRightIcon } from 'lucide-react'
import type { ComponentProps } from 'react'
import { createStyleContext } from 'styled-system/jsx'
import { breadcrumb } from 'styled-system/recipes'

const { withProvider, withContext } = createStyleContext(breadcrumb)

export type RootProps = ComponentProps<typeof Root>

export const Root = withProvider(ark.nav, 'root', { defaultProps: { 'aria-label': 'breadcrumb' } })
export const List = withContext(ark.ol, 'list')
export const Item = withContext(ark.li, 'item')
export const Link = withContext(ark.a, 'link')
export const Ellipsis = withContext(ark.li, 'ellipsis', {
  defaultProps: {
    role: 'presentation',
    'aria-hidden': true,
    children: '...',
  },
})

export const Separator = withContext(ark.li, 'separator', {
  defaultProps: {
    'aria-hidden': true,
    children: <ChevronRightIcon />,
  },
})

Integrate Recipe

Integrate this recipe in to your Panda config.

import { defineSlotRecipe } from '@pandacss/dev'

export const breadcrumb = defineSlotRecipe({
  className: 'breadcrumb',
  slots: ['root', 'list', 'link', 'item', 'separator', 'ellipsis'],
  base: {
    list: {
      alignItems: 'center',
      display: 'flex',
      listStyle: 'none',
      wordBreak: 'break-word',
    },
    link: {
      alignItems: 'center',
      borderRadius: 'l1',
      display: 'inline-flex',
      focusRing: 'outside',
      gap: '2',
      outline: '0',
      textDecoration: 'none',
      transition: 'color',
      _icon: { boxSize: '1em' },
    },
    item: {
      display: 'inline-flex',
      alignItems: 'center',
      color: 'fg.muted',
      _last: {
        color: 'fg.default',
      },
    },
    separator: {
      color: 'fg.subtle',
      _icon: { boxSize: '1em' },
      _rtl: { rotate: '180deg' },
    },
    ellipsis: {
      alignItems: 'center',
      color: 'fg.muted',
      display: 'inline-flex',
      justifyContent: 'center',
      _icon: { boxSize: '1em' },
    },
  },

  variants: {
    variant: {
      underline: {
        link: {
          textDecoration: 'underline',
          textDecorationThickness: '0.1em',
          textUnderlineOffset: '0.125em',
          textDecorationColor: 'fg.subtle',
          _hover: { textDecorationColor: 'fg.default' },
        },
      },
      plain: {
        link: {
          color: 'fg.muted',
          _hover: { color: 'fg.default' },
          _currentPage: { color: 'fg.default' },
        },
      },
    },
    size: {
      xs: { list: { gap: '1', textStyle: 'xs' } },
      sm: { list: { gap: '1', textStyle: 'sm' } },
      md: { list: { gap: '1.5', textStyle: 'md' } },
      lg: { list: { gap: '2', textStyle: 'lg' } },
    },
  },

  defaultVariants: {
    variant: 'plain',
    size: 'md',
  },
})

Usage

import { Breadcrumb } from '@/components/ui'

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link />
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
  </Breadcrumb.List>
</Breadcrumb.Root>

Info

If you prefer a closed component composition, check out the snippet below.

Examples

Sizes

Use the size prop to change the size of the breadcrumb component

Variants

Use the variant prop to change the variant of the breadcrumb component.

Seperator

Use the Breadcrumb.Separator component to change the separator between breadcrumb items.

Interactive

Keep the last breadcrumb interactive.

Icon

Add a custom icon to the breadcrumb by rendering it within Breadcrumb.Link

Ellipsis

Render the Breadcrumb.Ellipsis component to show an ellipsis after a breadcrumb item

As an alternative, consider adding a Menu component to display the condensed links in a dropdown list:

Routing Library

Use the asChild prop to change the underlying breadcrumb link

import { Link } from 'next/link'
import { Breadcrumb } from '@/components/ui'

export const App = () => {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link asChild>
            <Link href="/docs">Docs</Link>
          </Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
      </Breadcrumb.List>
    </Breadcrumb.Root>
  )
}

Closed Component

Here is an example of how to use the Breadcrumb component in a closed manner.

import { Fragment, forwardRef, type ReactNode } from 'react'
import { Breadcrumb as StyledBreadcrumb } from '@/components/ui'

export interface BreadcrumbProps extends StyledBreadcrumb.RootProps {
  items: Array<{ title: ReactNode; url?: string }>
}

export const Breadcrumb = forwardRef<HTMLDivElement, BreadcrumbProps>(
  function BreadcrumbRoot(props, ref) {
    const { items, ...rootProps } = props

    return (
      <StyledBreadcrumb.Root ref={ref} {...rootProps}>
        <StyledBreadcrumb.List>
          {items.map((item, index) => {
            const last = index === items.length - 1

            return last ? (
              <StyledBreadcrumb.Item key={index}>{item.title}</StyledBreadcrumb.Item>
            ) : (
              <Fragment key={index}>
                <StyledBreadcrumb.Item>
                  {item.url ? (
                    <StyledBreadcrumb.Link href={item.url}>{item.title}</StyledBreadcrumb.Link>
                  ) : (
                    item.title
                  )}
                </StyledBreadcrumb.Item>
                <StyledBreadcrumb.Separator />
              </Fragment>
            )
          })}
        </StyledBreadcrumb.List>
      </StyledBreadcrumb.Root>
    )
  },
)

and use it like this:

<Breadcrumb items={[ { title: 'Docs', url: '/docs' }]} />

Props

Prop	Default	Type
`variant`	`'plain'`	`'underline' \| 'plain'`
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'`