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 components
import {
  Breadcrumb,
  Link,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/breadcrumb.css';
import '@fintech-sandpit/ui/style/components/link.css';

return (
  <Breadcrumb.Root>
    <Breadcrumb.List>
      <Breadcrumb.Item>
        <Breadcrumb.Link asChild>
          <Link href="/">
            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 components
import {
  Breadcrumb,
  Link,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/breadcrumb.css';
import '@fintech-sandpit/ui/style/components/link.css';
</script>

<template>
  <Breadcrumb.Root size="md">
    <Breadcrumb.List>
      <Breadcrumb.Item>
        <Breadcrumb.Link as-child>
          <Link href="/">
            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 = 'sm' | 'md' | 'lg'