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

Example

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="mr-2 text-primary"
            />

            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 size="md">
    <Breadcrumb.List>
      <Breadcrumb.Item>
        <Breadcrumb.Link as-child>
          <Link href="/">
            <Icon
              :as="faHome"
              box-size="1em"
              class="mr-2 text-primary"
            />

            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 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`	Use the provided child element as the default rendered element, combining their props and behavior

Name	Type	Default	Description
`as-child`	`boolean`	`false`	Use the provided child element as the default rendered element, combining their props and behavior

React
Vue

Name	Type	Default	Description
`isActive`	`boolean`	`false`	Whether this is the current page
`asChild`	`boolean`	`false`	Use the provided child element as the default rendered element, combining their props and behavior

Name	Type	Default	Description
`is-active`	`boolean`	`false`	Whether this is the current page
`as-child`	`boolean`	`false`	Use the provided child element as the default rendered element, combining their props and behavior

React
Vue

Name	Type	Default	Description
`asChild`	`boolean`	`false`	Use the provided child element as the default rendered element, combining their props and behavior
`href`	`string`	—	Link URL

Name	Type	Default	Description
`as-child`	`boolean`	`false`	Use the provided child element as the default rendered element, combining their props and behavior
`href`	`string`	—	Link URL

React
Vue

Name	Type	Default	Description
`asChild`	`boolean`	`false`	Use the provided child element as the default rendered element, combining their props and behavior

Name	Type	Default	Description
`as-child`	`boolean`	`false`	Use the provided child element as the default rendered element, combining their props and behavior

Types

type BreadcrumbSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'