Breadcrumbs

Overview

Breadcrumbs provide users with a way to navigate back to previous pages or sections in a hierarchical structure. They help users understand their current location within the website and provide quick access to parent pages.

Preview

Preview

Code

import { Breadcrumbs } from './components/ui';
import { ChevronRight } from 'lucide-react';

function BreadcrumbDemo() {
  return (
    <Breadcrumbs 
      items={[
        { label: 'Home', href: '#' },
        { label: 'Products', href: '#' },
        { label: 'Electronics', href: '#' },
        { label: 'Smartphones' }
      ]}
      separatorIcon={ChevronRight}
    />
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add breadcrumbs

yarn

yarn @mindfiredigital/ignix-ui add breadcrumbs

pnpm

pnpm @mindfiredigital/ignix-ui add breadcrumbs

Usage

Import the component:

import { Breadcrumbs } from './components/ui';

Basic Usage

function BasicBreadcrumb() {
  return (
    <Breadcrumbs
      items={[
        { label: 'Home', href: '/' },
        { label: 'Products', href: '/products' },
        { label: 'Current Page' }
      ]}
    />
  );
}

Variants

Preview

Code

import { Breadcrumbs } from '@ignix-ui/breadcrumbs';

<Breadcrumbs 
  items={[
    { label: 'Home', href: '#', icon: Home },
    { label: 'Products', href: '#' },
    { label: 'Electronics', href: '#' },
    { label: 'Smartphones' }
  ]}
  separatorIcon={ChevronRight}
  variant="text"
  
  
/>