Navigation

Breadcrumb

Navigation helper for deeply nested content hierarchies.

Breadcrumb

Standard hierarchical navigation.

'use client'

import React from 'react'
import { Breadcrumb } from 'biibaos'
import { Home, ChevronRight } from 'lucide-react'

export default function App() {
  const items = [
    { label: 'Home', href: '/' },
    { label: 'Components', href: '/docs' },
    { label: 'Breadcrumb', active: true },
  ]

  return (
    <Breadcrumb items={items} />
  )
}

With Icons

Add icons to breadcrumb items for better visual context.

'use client'

import React from 'react'
import { Breadcrumb, Icon } from 'biibaos'
import { Home, Mail } from 'lucide-react'

export default function App() {
  return (
    <Breadcrumb
      items={[
        { label: 'Home', icon: <Icon icon={Home} size={14} />, href: '/' },
        { label: 'Files', icon: <Icon icon={Mail} size={14} />, href: '/docs' },
        { label: 'Invoice.pdf', active: true },
      ]}
    />
  )
}

Properties

Prop	Type	Default	Description
`items`	`BreadcrumbItemProps[]`	—	Array of item configurations with label, icon, actions, and active states
`separator`	`React.ReactNode`	<ChevronRight size={14	Custom separator character or element between breadcrumb links
`maxItems`	`number`	4	Configures the maxItems option
`label`	`React.ReactNode`	—	Primary text label description
`icon`	`React.ReactNode`	—	Custom icon prefix element
`href`	`string`	—	URL address of the link. Renders as text if omitted
`active`	`boolean`	—	Highlights the item as the current active route
`onClick`	`() => void`	—	Click event callback handler

Charts

Dropdown