Breadcrumb

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

Demo

React

SizeSmallMediumLarge

NayaOne Design System

Components

Display

Breadcrumb component

Vue

SizeSmallMediumLarge

NayaOne Design System

Components

Display

Breadcrumb component

Example

React

import {
  Breadcrumb,
  Link,
} from '@fintech-sandpit/ui/react';

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>
);

Vue

<script setup lang="ts">
import {
  Breadcrumb,
  Link,
} from '@fintech-sandpit/ui/vue';
</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

Breadcrumb Root Props

Name	Type	Default	Description
size	BreadcrumbSize	md	Size

Breadcrumb List Props

React

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

Vue

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

Breadcrumb Item Props

React

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

Vue

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

Breadcrumb Link Props

React

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

Vue

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

Breadcrumb Separator Props

React

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

Vue

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'