Pillar UI React Blockquote Component documentation

Enhance website navigation with a customizable Breadcrumb component for React. Easily guide users through your website's hierarchy and improve user experience.

Components:

Breadcrumb BreadcrumbItem

Type

Components

import

import { Pillar UI React Blockquote Component } from '@pillar-ui/core'
Go To breadcrumb Source CodeIssuesdiscussions

Usage

import { Accordion, AccordionItem } from '@pillar-ui/core'

function MyComponent() {
  return (
    <Accordion>
      <AccordionItem title="Section 1">
        <p>Content for section 1 goes here.</p>
      </AccordionItem>
      <AccordionItem title="Section 2">
        <p>Content for section 2 goes here.</p>
      </AccordionItem>
      <AccordionItem title="Section 3">
        <p>Content for section 3 goes here.</p>
      </AccordionItem>
    </Accordion>
  )
}

Props

Separator

The separator prop allows you to customize the separator between each BreadcrumbItem. You can pass a string, a React element, or a component to use as the separator.

<div className="l_f-md">
  <Breadcrumb separator="-">
    <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
    <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
    <Breadcrumb.Item link="./" current>
      breadcrumb
    </Breadcrumb.Item>
  </Breadcrumb>

  <Breadcrumb separator="*">
    <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
    <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
    <Breadcrumb.Item link="./" current>
      breadcrumb
    </Breadcrumb.Item>
  </Breadcrumb>

  <Breadcrumb separator={<Minus width={10} />}>
    <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
    <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
    <Breadcrumb.Item link="./" current>
      breadcrumb
    </Breadcrumb.Item>
  </Breadcrumb>
</div>

In the example above, we pass a string (- and *) as the separator in the first two examples, and a custom React component (Minus) as the separator in the third example. Note that the separator is only displayed between BreadcrumbItems, and not before the first or after the last item.

Color

Type: Color (string) Default: primary Options: danger | warning | success | primary | secondary | bg

You can customize the color of the breadcrumb by passing a color prop to the Breadcrumb component. The available colors are "red", "orange", "green", "secondary", "purple", "brown", "primary", and "bg". Here are some examples:

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

function BreadcrumbColor() {
  return (
    <div className="l_f-md">
      <Breadcrumb color="dan">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>

      <Breadcrumb color="war">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>

      <Breadcrumb color="suc">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>

      <Breadcrumb color="sec">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>

      <Breadcrumb color="pri">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>

      <Breadcrumb color="bg">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>
    </div>
  )
}

You can add icons to your breadcrumb by passing an icon prop to the Breadcrumb.Item component. The icon can be any valid React element. Here are some examples:

export function BreadcrumbIcons() {
  return (
    <div className="l_f-md">
      <Breadcrumb>
        <Breadcrumb.Item link="../../..">
          Home
          <Home width={16} />
        </Breadcrumb.Item>

        <Breadcrumb.Item link="../..">
          components
          <Anchor width={16} />
        </Breadcrumb.Item>

        <Breadcrumb.Item link="../">
          base-ui
          <Home width={16} />
        </Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
          <Link width={16} />
        </Breadcrumb.Item>
      </Breadcrumb>

      <Breadcrumb>
        <Breadcrumb.Item link="../../..">
          <Home width={16} />
          Home
        </Breadcrumb.Item>

        <Breadcrumb.Item link="../..">
          <Anchor width={16} />
          components
        </Breadcrumb.Item>

        <Breadcrumb.Item link="../">
          <Home width={16} />
          base-ui
        </Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          <Link width={16} />
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>

      <Breadcrumb>
        <Breadcrumb.Item link="../../..">
          <span className="u_visually-hidden">Home</span>
          <Home width={16} />
        </Breadcrumb.Item>

        <Breadcrumb.Item link="../..">
          components
          <Anchor width={16} />
        </Breadcrumb.Item>

        <Breadcrumb.Item link="../">
          base-ui
          <Home width={16} />
        </Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
          <Link width={16} />
        </Breadcrumb.Item>
      </Breadcrumb>
    </div>
  )
}

This section demonstrates the use of icons for each Breadcrumb.Item in the Breadcrumb component. The icons are passed as children to each Breadcrumb.Item, and are displayed alongside the item text. The width prop is used to set the size of the icons.

Sizes

  • Type: string
  • Default: md
  • Options: 2xs | xs | sm | md | lg | xl | 2xl

The Breadcrumb component supports the following sizes:

You can set the size by passing the size prop to the Breadcrumb component with one of the above values. Here's an example of using the different sizes:

import { Breadcrumb } from 'base-ui'

function BreadcrumbSize() {
  return (
    <div className="l_f-md">
      <Breadcrumb size="2xs" separator="-">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>
      <Breadcrumb size="xs" separator="-">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>
      <Breadcrumb size="sm" separator="-">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>
      <Breadcrumb separator="-">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>
      <Breadcrumb size="md" separator="/">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>
      <Breadcrumb size="lg">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>
      <Breadcrumb size="xl">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>
      <Breadcrumb size="2xl">
        <Breadcrumb.Item link="../..">components</Breadcrumb.Item>
        <Breadcrumb.Item link="../">base-ui</Breadcrumb.Item>
        <Breadcrumb.Item link="./" current>
          breadcrumb
        </Breadcrumb.Item>
      </Breadcrumb>
    </div>
  )
}

Troubleshooting

Accordion items are not expanding or collapsing If the accordion items are not expanding or collapsing as expected, ensure that the header prop of each AccordionItem component is a unique string or number. If multiple items have the same header value, only one of them will be toggled when clicked.

Conclusion

The Accordion component is a versatile and accessible way to display collapsible content sections in your React applications. It offers a variety of customization options and is fully compatible with TypeScript