Breadcrumb Component

Overview

The Breadcrumb component provides navigation context by showing users their current location within a website's hierarchy. It helps users understand where they are and provides quick navigation back to parent pages.

Basic Usage

import { Breadcrumb } from '@dashflowx/core'

export default function BreadcrumbExample() {
  const breadcrumbList = [
    { id: '1', type: 'item', title: 'Home', href: '/', separator: true },
    { id: '2', type: 'item', title: 'Products', href: '/products', separator: true },
    { id: '3', type: 'item', title: 'Current Page', separator: false }
  ];

  return (
    <Breadcrumb 
      variant="default"
      size="md"
      separatorStyle="custom"
      breadcrumbList={breadcrumbList} 
    />
  )
}

Preview:

Loading Breadcrumb...

Props

Prop	Type	Default	Description
`breadcrumbList`	`iBreadcrumbItem[]`	-	Array of breadcrumb items
`variant`	`BreadcrumbVariant`	`'default'`	Visual style variant of the breadcrumb
`size`	`BreadcrumbSize`	`'md'`	Size of the breadcrumb component
`separatorStyle`	`BreadcrumbSeparatorStyle`	`'custom'`	Style of the separator between items
`className`	`string`	`''`	Additional CSS classes for the container

Variants

Default

Standard breadcrumb with muted colors and subtle styling.

const defaultBreadcrumb = [
  { id: '1', type: 'item', title: 'Home', href: '/', separator: true },
  { id: '2', type: 'item', title: 'Products', href: '/products', separator: true },
  { id: '3', type: 'item', title: 'Electronics', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="custom"
  breadcrumbList={defaultBreadcrumb} 
/>

Loading Breadcrumb...

Minimal

Clean, minimal design with simple text styling.

const minimalBreadcrumb = [
  { id: '1', type: 'item', title: 'Dashboard', href: '/dashboard', separator: true },
  { id: '2', type: 'item', title: 'Analytics', href: '/dashboard/analytics', separator: true },
  { id: '3', type: 'item', title: 'Reports', separator: false }
];

<Breadcrumb 
  variant="minimal"
  size="md"
  separatorStyle="custom"
  breadcrumbList={minimalBreadcrumb} 
/>

Loading Breadcrumb...

Bordered

Breadcrumb with a subtle border and rounded corners.

const borderedBreadcrumb = [
  { id: '1', type: 'item', title: 'Store', href: '/store', separator: true },
  { id: '2', type: 'item', title: 'Categories', href: '/store/categories', separator: true },
  { id: '3', type: 'item', title: 'Clothing', href: '/store/categories/clothing', separator: true },
  { id: '4', type: 'item', title: 'T-Shirts', separator: false }
];

<Breadcrumb 
  variant="bordered"
  size="md"
  separatorStyle="custom"
  breadcrumbList={borderedBreadcrumb} 
/>

Loading Breadcrumb...

Filled

Breadcrumb with a light background fill and rounded corners.

const filledBreadcrumb = [
  { id: '1', type: 'item', title: 'Library', href: '/library', separator: true },
  { id: '2', type: 'item', title: 'Books', href: '/library/books', separator: true },
  { id: '3', type: 'item', title: 'Fiction', href: '/library/books/fiction', separator: true },
  { id: '4', type: 'item', title: 'Mystery', href: '/library/books/fiction/mystery', separator: true },
  { id: '5', type: 'item', title: 'The Hound', separator: false }
];

<Breadcrumb 
  variant="filled"
  size="md"
  separatorStyle="custom"
  breadcrumbList={filledBreadcrumb} 
/>

Loading Breadcrumb...

Gradient

Breadcrumb with a beautiful gradient background and white text.

const gradientBreadcrumb = [
  { id: '1', type: 'item', title: 'Portfolio', href: '/portfolio', separator: true },
  { id: '2', type: 'item', title: 'Projects', href: '/portfolio/projects', separator: true },
  { id: '3', type: 'item', title: 'Web Apps', separator: false }
];

<Breadcrumb 
  variant="gradient"
  size="md"
  separatorStyle="custom"
  breadcrumbList={gradientBreadcrumb} 
/>

Loading Breadcrumb...

Outlined

Breadcrumb with a prominent border and clean styling.

const outlinedBreadcrumb = [
  { id: '1', type: 'item', title: 'Admin', href: '/admin', separator: true },
  { id: '2', type: 'item', title: 'Users', href: '/admin/users', separator: true },
  { id: '3', type: 'item', title: 'Settings', href: '/admin/users/settings', separator: true },
  { id: '4', type: 'item', title: 'Profile', separator: false }
];

<Breadcrumb 
  variant="outlined"
  size="md"
  separatorStyle="custom"
  breadcrumbList={outlinedBreadcrumb} 
/>

Loading Breadcrumb...

Sizes

Small

Compact size with minimal spacing and smaller text.

const smallBreadcrumb = [
  { id: '1', type: 'item', title: 'Blog', href: '/blog', separator: true },
  { id: '2', type: 'item', title: 'Tech', separator: false }
];

<Breadcrumb 
  variant="default"
  size="sm"
  separatorStyle="custom"
  breadcrumbList={smallBreadcrumb} 
/>

Loading Breadcrumb...

Medium

Standard size with balanced spacing and text size.

const mediumBreadcrumb = [
  { id: '1', type: 'item', title: 'Support', href: '/support', separator: true },
  { id: '2', type: 'item', title: 'Tickets', href: '/support/tickets', separator: true },
  { id: '3', type: 'item', title: 'Open', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="custom"
  breadcrumbList={mediumBreadcrumb} 
/>

Loading Breadcrumb...

Large

Larger size with generous spacing and bigger text.

const largeBreadcrumb = [
  { id: '1', type: 'item', title: 'Documentation', href: '/docs', separator: true },
  { id: '2', type: 'item', title: 'Components', href: '/docs/components', separator: true },
  { id: '3', type: 'item', title: 'Navigation', href: '/docs/components/navigation', separator: true },
  { id: '4', type: 'item', title: 'Breadcrumb', separator: false }
];

<Breadcrumb 
  variant="default"
  size="lg"
  separatorStyle="custom"
  breadcrumbList={largeBreadcrumb} 
/>

Loading Breadcrumb...

Separator Styles

Custom (Default)

Standard greater-than symbol separator.

const customSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Home', href: '/', separator: true },
  { id: '2', type: 'item', title: 'About', href: '/about', separator: true },
  { id: '3', type: 'item', title: 'Team', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="custom"
  breadcrumbList={customSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Slash

Forward slash separator for a clean look.

const slashSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Files', href: '/files', separator: true },
  { id: '2', type: 'item', title: 'Documents', href: '/files/documents', separator: true },
  { id: '3', type: 'item', title: 'Reports', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="slash"
  breadcrumbList={slashSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Chevron

Chevron arrow separator for modern design.

const chevronSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Shop', href: '/shop', separator: true },
  { id: '2', type: 'item', title: 'Electronics', href: '/shop/electronics', separator: true },
  { id: '3', type: 'item', title: 'Laptops', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="chevron"
  breadcrumbList={chevronSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Arrow

Right arrow separator for directional navigation.

const arrowSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Services', href: '/services', separator: true },
  { id: '2', type: 'item', title: 'Consulting', href: '/services/consulting', separator: true },
  { id: '3', type: 'item', title: 'Strategy', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="arrow"
  breadcrumbList={arrowSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Dot

Dot separator for minimal, clean appearance.

const dotSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Gallery', href: '/gallery', separator: true },
  { id: '2', type: 'item', title: 'Photos', href: '/gallery/photos', separator: true },
  { id: '3', type: 'item', title: 'Nature', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="dot"
  breadcrumbList={dotSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Caret

Downward caret separator for dropdown-style navigation.

const caretSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Tools', href: '/tools', separator: true },
  { id: '2', type: 'item', title: 'Development', href: '/tools/development', separator: true },
  { id: '3', type: 'item', title: 'IDE', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="caret"
  breadcrumbList={caretSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Double Chevron

Double chevron separator for enhanced visual hierarchy.

const doubleChevronSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Learning', href: '/learning', separator: true },
  { id: '2', type: 'item', title: 'Courses', href: '/learning/courses', separator: true },
  { id: '3', type: 'item', title: 'Programming', href: '/learning/courses/programming', separator: true },
  { id: '4', type: 'item', title: 'JavaScript', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="double-chevron"
  breadcrumbList={doubleChevronSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Triangle

Triangle separator for unique visual appeal.

const triangleSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Projects', href: '/projects', separator: true },
  { id: '2', type: 'item', title: 'Web', href: '/projects/web', separator: true },
  { id: '3', type: 'item', title: 'E-commerce', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="triangle"
  breadcrumbList={triangleSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Circle

Circle separator for a modern, geometric look.

const circleSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Design', href: '/design', separator: true },
  { id: '2', type: 'item', title: 'UI/UX', href: '/design/ui-ux', separator: true },
  { id: '3', type: 'item', title: 'Wireframes', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="circle"
  breadcrumbList={circleSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Square

Square separator for a structured, organized appearance.

const squareSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Management', href: '/management', separator: true },
  { id: '2', type: 'item', title: 'Projects', href: '/management/projects', separator: true },
  { id: '3', type: 'item', title: 'Timeline', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="square"
  breadcrumbList={squareSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Star

Star separator for a premium, special feel.

const starSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Premium', href: '/premium', separator: true },
  { id: '2', type: 'item', title: 'Features', href: '/premium/features', separator: true },
  { id: '3', type: 'item', title: 'Advanced', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="star"
  breadcrumbList={starSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Heart

Heart separator for a friendly, approachable design.

const heartSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Community', href: '/community', separator: true },
  { id: '2', type: 'item', title: 'Forums', href: '/community/forums', separator: true },
  { id: '3', type: 'item', title: 'Discussions', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="heart"
  breadcrumbList={heartSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Diamond

Diamond separator for a premium, luxury appearance.

const diamondSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Luxury', href: '/luxury', separator: true },
  { id: '2', type: 'item', title: 'Products', href: '/luxury/products', separator: true },
  { id: '3', type: 'item', title: 'Collection', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="diamond"
  breadcrumbList={diamondSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Arrow Up Right

Diagonal arrow separator for dynamic navigation.

const arrowUpRightSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Growth', href: '/growth', separator: true },
  { id: '2', type: 'item', title: 'Metrics', href: '/growth/metrics', separator: true },
  { id: '3', type: 'item', title: 'Analytics', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="arrow-up-right"
  breadcrumbList={arrowUpRightSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Arrow Down Right

Downward diagonal arrow separator for descending navigation.

const arrowDownRightSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Settings', href: '/settings', separator: true },
  { id: '2', type: 'item', title: 'Advanced', href: '/settings/advanced', separator: true },
  { id: '3', type: 'item', title: 'Configuration', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="arrow-down-right"
  breadcrumbList={arrowDownRightSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Arrow Left Right

Horizontal bidirectional arrow separator for flexible navigation.

const arrowLeftRightSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Navigation', href: '/navigation', separator: true },
  { id: '2', type: 'item', title: 'Menu', href: '/navigation/menu', separator: true },
  { id: '3', type: 'item', title: 'Items', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="arrow-left-right"
  breadcrumbList={arrowLeftRightSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Arrow Up Down

Vertical bidirectional arrow separator for vertical navigation.

const arrowUpDownSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Vertical', href: '/vertical', separator: true },
  { id: '2', type: 'item', title: 'Layout', href: '/vertical/layout', separator: true },
  { id: '3', type: 'item', title: 'Structure', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="arrow-up-down"
  breadcrumbList={arrowUpDownSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Grip Vertical

Grip separator for a modern, interactive feel.

const gripVerticalSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Interactive', href: '/interactive', separator: true },
  { id: '2', type: 'item', title: 'Elements', href: '/interactive/elements', separator: true },
  { id: '3', type: 'item', title: 'Components', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="grip-vertical"
  breadcrumbList={gripVerticalSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

More Horizontal

Horizontal dots separator for a minimal, clean look.

const moreHorizontalSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Minimal', href: '/minimal', separator: true },
  { id: '2', type: 'item', title: 'Design', href: '/minimal/design', separator: true },
  { id: '3', type: 'item', title: 'Clean', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="more-horizontal"
  breadcrumbList={moreHorizontalSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Plus

Plus separator for an additive, expanding feel.

const plusSeparatorBreadcrumb = [
  { id: '1', type: 'item', title: 'Expand', href: '/expand', separator: true },
  { id: '2', type: 'item', title: 'Features', href: '/expand/features', separator: true },
  { id: '3', type: 'item', title: 'Growth', separator: false }
];

<Breadcrumb 
  variant="default"
  size="md"
  separatorStyle="plus"
  breadcrumbList={plusSeparatorBreadcrumb} 
/>

Loading Breadcrumb...

Advanced Examples

Gradient with Star Separator

const gradientStarBreadcrumb = [
  { id: '1', type: 'item', title: 'Premium', href: '/premium', separator: true },
  { id: '2', type: 'item', title: 'Features', href: '/premium/features', separator: true },
  { id: '3', type: 'item', title: 'Advanced', separator: false }
];

<Breadcrumb 
  variant="gradient"
  size="lg"
  separatorStyle="star"
  className="shadow-lg"
  breadcrumbList={gradientStarBreadcrumb} 
/>

Loading Breadcrumb...

Bordered with Heart Separator

const borderedHeartBreadcrumb = [
  { id: '1', type: 'item', title: 'Community', href: '/community', separator: true },
  { id: '2', type: 'item', title: 'Support', href: '/community/support', separator: true },
  { id: '3', type: 'item', title: 'Help', separator: false }
];

<Breadcrumb 
  variant="bordered"
  size="md"
  separatorStyle="heart"
  className="border-pink-200 bg-pink-50"
  breadcrumbList={borderedHeartBreadcrumb} 
/>

Loading Breadcrumb...

Outlined with Diamond Separator

const outlinedDiamondBreadcrumb = [
  { id: '1', type: 'item', title: 'Luxury', href: '/luxury', separator: true },
  { id: '2', type: 'item', title: 'Collection', href: '/luxury/collection', separator: true },
  { id: '3', type: 'item', title: 'Premium', separator: false }
];

<Breadcrumb 
  variant="outlined"
  size="sm"
  separatorStyle="diamond"
  className="border-purple-300 text-purple-700"
  breadcrumbList={outlinedDiamondBreadcrumb} 
/>

Loading Breadcrumb...

interface iBreadcrumbItem {
  id: string;
  type: 'item' | 'dropdown';
  title: string | JSX.Element;
  href?: string;
  children?: iBreadcrumbItemChild[];
  separator?: boolean;
}

interface iBreadcrumbItemChild {
  title: string | JSX.Element;
  href?: string;
}

Common Use Cases

const productBreadcrumb = [
  { id: '1', type: 'item', title: 'Home', href: '/', separator: true },
  { id: '2', type: 'item', title: 'Electronics', href: '/electronics', separator: true },
  { id: '3', type: 'item', title: 'Smartphones', href: '/electronics/smartphones', separator: true },
  { id: '4', type: 'item', title: 'iPhone 15 Pro', separator: false }
];

<Breadcrumb 
  variant="filled"
  size="md"
  separatorStyle="chevron"
  breadcrumbList={productBreadcrumb} 
/>

const docBreadcrumb = [
  { id: '1', type: 'item', title: 'Docs', href: '/docs', separator: true },
  { id: '2', type: 'item', title: 'Components', href: '/docs/components', separator: true },
  { id: '3', type: 'item', title: 'Button', href: '/docs/components/button', separator: true },
  { id: '4', type: 'item', title: 'API Reference', separator: false }
];

<Breadcrumb 
  variant="minimal"
  size="sm"
  separatorStyle="slash"
  breadcrumbList={docBreadcrumb} 
/>

const adminBreadcrumb = [
  { id: '1', type: 'item', title: 'Dashboard', href: '/admin', separator: true },
  { id: '2', type: 'item', title: 'Users', href: '/admin/users', separator: true },
  { id: '3', type: 'item', title: 'User Details', separator: false }
];

<Breadcrumb 
  variant="gradient"
  size="lg"
  separatorStyle="arrow"
  breadcrumbList={adminBreadcrumb} 
/>

Best Practices

Choose the Right Variant

Use default for standard navigation
Use minimal for clean, simple designs
Use bordered for subtle emphasis
Use filled for gentle background highlighting
Use gradient for eye-catching navigation
Use outlined for prominent borders

Select Appropriate Sizes

Use sm for compact spaces and mobile
Use md for standard web layouts
Use lg for prominent navigation areas

Pick Suitable Separators

Use custom for traditional breadcrumbs
Use slash for clean, minimal designs
Use chevron for modern interfaces
Use arrow for directional emphasis
Use dot for subtle separation
Use caret for dropdown-style navigation
Use double-chevron for enhanced hierarchy
Use triangle for unique visual appeal
Use circle for modern, geometric designs
Use square for structured, organized layouts
Use star for premium, special features
Use heart for friendly, community sections
Use diamond for luxury, premium content
Use arrow-up-right for growth, upward trends
Use arrow-down-right for settings, configuration
Use arrow-left-right for flexible navigation
Use arrow-up-down for vertical layouts
Use grip-vertical for interactive elements
Use more-horizontal for minimal designs
Use plus for expanding, additive content

Accessibility Considerations

Ensure sufficient color contrast for all variants
Provide hover states for interactive elements
Use semantic HTML structure
Include proper ARIA labels

Overview

Basic Usage

Props

Variants

Default

Minimal

Bordered

Filled

Gradient

Outlined

Sizes

Small

Medium

Large

Separator Styles

Custom (Default)

Slash

Chevron

Arrow

Dot

Caret

Double Chevron

Triangle

Circle

Square

Star

Heart

Diamond

Arrow Up Right

Arrow Down Right

Arrow Left Right

Arrow Up Down

Grip Vertical

More Horizontal

Plus

Advanced Examples

Gradient with Star Separator

Bordered with Heart Separator

Outlined with Diamond Separator

Breadcrumb Item Interface

Common Use Cases

E-commerce Navigation

Documentation Navigation

Admin Panel Navigation

Best Practices

Choose the Right Variant

Select Appropriate Sizes

Pick Suitable Separators

Accessibility Considerations