Biofarma | Bind UI

Breadcrumbs

Breadcrumbs are a sequence of links typically displayed at the top of a webpage or app and help users understand where they are in the overall hierarchy and easily navigate back to previous levels.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Usage

import { Breadcrumbs } from 'bio-bind-ui';

<Breadcrumbs
  items={[
    {
      href: '/Docs',
      title: 'Docs',
    },
    {
      href: '/Components',
      onClick: () => {},
      title: 'Components',
    },
    {
      href: '/Props',
      title: 'Props',
    },
  ]}
  mode='light'
/>

Examples

Items

Use items to add content to breadcrumbs.

Load More (optional)

Use load more to display an ellipsis on the breadcrumbs content.

Mode (optional)

Use mode to use dark or light.

Props

Props	Required	Default	Type	description
items	true	`[]`	`BreadcrumbsItem[]`	A list item that contains the number of breadcrumbs.
separator	false	-	`React.ReactNode`	List of sparators for connecting or separating breadcrumbs.
logo	false	-	`React.ReactNode`	Unique identifier for the breadcrumb menu icon.
showLoadMore	false	`false`	`boolean`	If true, the center breadcrumb will be made ellipsis.
mode	false	`light`	`light` `dark`	The theme mode of the breadcrumbs (`light` or `dark`).
id	false	-	`string`	A unique identifier for the avatar.

Avatar Card