Skip to content

Breadcrumb

The Breadcrumb component provides a navigation trail showing the user’s current location within the application hierarchy.

Demo

React
Vue

Size

Usage

React
Vue

import {
  Breadcrumb,
  Link,
  Icon,
} from '@fintech-sandpit/ui/react';
import { faHome } from '@fortawesome/free-solid-svg-icons';

return (
  <Breadcrumb.Root>
    <Breadcrumb.List>
      <Breadcrumb.Item>
        <Breadcrumb.Link asChild>
          <Link href="/">
            <Icon
              as={faHome}
              boxSize="1em"
              className="text-gray-400 dark:text-gray-600 mr-2"
            />

            NayaOne Design System
          </Link>
        </Breadcrumb.Link>
      </Breadcrumb.Item>

      <Breadcrumb.Separator />

      <Breadcrumb.Item>
        <Breadcrumb.Link href="#">
          Components
        </Breadcrumb.Link>
      </Breadcrumb.Item>

      <Breadcrumb.Separator />

      <Breadcrumb.Item>
        <Breadcrumb.Link href="#">
          Display
        </Breadcrumb.Link>
      </Breadcrumb.Item>

      <Breadcrumb.Separator />

      <Breadcrumb.Item isActive>
        <Breadcrumb.Link asChild>
          <span>
            Breadcrumb component
          </span>
        </Breadcrumb.Link>
      </Breadcrumb.Item>
    </Breadcrumb.List>
  </Breadcrumb.Root>
);

<script setup lang="ts">
import {
  Breadcrumb,
  Link,
  Icon,
} from '@fintech-sandpit/ui/vue';
import { faHome } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <Breadcrumb.Root>
    <Breadcrumb.List>
      <Breadcrumb.Item>
        <Breadcrumb.Link as-child>
          <Link href="/">
            <Icon
              :as="faHome"
              box-size="1em"
              class="text-gray-400 dark:text-gray-600 mr-2"
            />

            <span>NayaOne Design System</span>
          </Link>
        </Breadcrumb.Link>
      </Breadcrumb.Item>

      <Breadcrumb.Separator />

      <Breadcrumb.Item>
        <Breadcrumb.Link href="#">
          <span>Components</span>
        </Breadcrumb.Link>
      </Breadcrumb.Item>

      <Breadcrumb.Separator />

      <Breadcrumb.Item>
        <Breadcrumb.Link href="#">
          <span>Display</span>
        </Breadcrumb.Link>
      </Breadcrumb.Item>

      <Breadcrumb.Separator />

      <Breadcrumb.Item is-active>
        <Breadcrumb.Link as-child>
          <span>Breadcrumb component</span>
        </Breadcrumb.Link>
      </Breadcrumb.Item>
    </Breadcrumb.List>
  </Breadcrumb.Root>
</template>

Props

Name	Type	Default	Description
`size`	`BreadcrumbSize`	`md`	Size

React
Vue

Name	Type	Default	Description
`asChild`	`boolean`	`false`	Whether to render the list as a child

Name	Type	Default	Description
`as-child`	`boolean`	`false`	Whether to render the list as a child

React
Vue

Name	Type	Default	Description
`isActive`	`boolean`	`false`	Whether this is the current page
`asChild`	`boolean`	`false`	Whether to render the item as a child

Name	Type	Default	Description
`is-active`	`boolean`	`false`	Whether this is the current page
`as-child`	`boolean`	`false`	Whether to render the item as a child

React
Vue

Name	Type	Default	Description
`asChild`	`boolean`	`false`	Whether to render the link as a child
`href`	`string`		Link URL

Name	Type	Default	Description
`as-child`	`boolean`	`false`	Whether to render the link as a child
`href`	`string`		Link URL

React
Vue

Name	Type	Default	Description
`asChild`	`boolean`	`false`	Whether to render the separator as a child

Name	Type	Default	Description
`as-child`	`boolean`	`false`	Whether to render the separator as a child

Types

type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning'
type BreadcrumbSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'