Use breadcrumbs to give users a sense of orientation within your app. They should allow viewers to understand your intended structure of your content, and how to quickly navigate around to find what they're looking for.

Demo

Custom delimiters

You can customise the "delimiter" between the breadcrumb items using the delimiter
key on the slots
prop. This can be either a ReactElement
or a string
.

Links

By default breadcrumbs won't link anywhere, you'll need to pass in the href
property into your BreadrumbsItem
. For e.g.

 tsx
import { Breadcrumbs } from 'nitpick-ui'

export default function Demo() {
    return (
        <Breadcrumbs
            items={[
                { title: 'Home', href: '/' },
                { title: 'Components', href: '/components' },
                { title: 'Breadcrumbs', href: '/components/breadcrumbs' },
            ]}
        />
    )
}

The crumb will then be rendered as an anchor tag, and will be styled as a link when you hover it. If you're using a framework such as Next.js you may want to use the native Link
component, you may pass this as a link
property to the slots
prop.

 tsx
import { Breadcrumbs } from 'nitpick-ui'
import Link from 'next/link'

export default function Demo() {
    return (
        <Breadcrumbs
            slots={{
                link: Link,
            }}
            items={[
                { title: 'Home', href: '/' },
                { title: 'Components', href: '/components' },
                { title: 'Breadcrumbs', href: '/components/breadcrumbs' },
            ]}
        />
    )
}

Keep in mind your React component for links must accept the href
prop if it doesn't already. If you're using a framework that provides a link without a href
prop you'll need to wrap it.