Mcoli UI - MC Breadcrumb

Overview

The mc-breadcrumb is a navigation component of the MicroClub UI library. Built on semantic HTML elements, it provides accessible breadcrumbs with composable building blocks and MicroClub's signature styling via Tailwind CSS v4.

As a part of the MicroClub library, this component is designed for instant deployment into your codebase, giving you full ownership of its look and behavior.

Preview

import {  McBreadcrumb,  McBreadcrumbEllipsis,  McBreadcrumbItem,  McBreadcrumbLink,  McBreadcrumbList,  McBreadcrumbPage,  McBreadcrumbSeparator,} from '../ui/mc-breadcrumb';export default function McBreadcrumbDemo() {  return (    <div className="flex flex-col gap-6">      <McBreadcrumb>        <McBreadcrumbList>          <McBreadcrumbItem>            <McBreadcrumbLink href="#home">Home</McBreadcrumbLink>          </McBreadcrumbItem>          <McBreadcrumbSeparator />          <McBreadcrumbItem>            <McBreadcrumbLink href="#components">Components</McBreadcrumbLink>          </McBreadcrumbItem>          <McBreadcrumbSeparator />          <McBreadcrumbItem>            <McBreadcrumbPage>Breadcrumb</McBreadcrumbPage>          </McBreadcrumbItem>        </McBreadcrumbList>      </McBreadcrumb>      <McBreadcrumb>        <McBreadcrumbList>          <McBreadcrumbItem>            <McBreadcrumbLink href="#home">Home</McBreadcrumbLink>          </McBreadcrumbItem>          <McBreadcrumbSeparator />          <McBreadcrumbItem>            <McBreadcrumbEllipsis />          </McBreadcrumbItem>          <McBreadcrumbSeparator />          <McBreadcrumbItem>            <McBreadcrumbLink href="#components">Components</McBreadcrumbLink>          </McBreadcrumbItem>          <McBreadcrumbSeparator />          <McBreadcrumbItem>            <McBreadcrumbPage>Breadcrumb</McBreadcrumbPage>          </McBreadcrumbItem>        </McBreadcrumbList>      </McBreadcrumb>    </div>  );}

Add to Your Project

Deploy the mc-breadcrumb directly to your components/ui directory:

npx mcoli-ui@latest add mc-breadcrumb

pnpm dlx mcoli-ui@latest add mc-breadcrumb

yarn dlx mcoli-ui@latest add mc-breadcrumb

bunx mcoli-ui@latest add mc-breadcrumb

Manual Setup

If you prefer manual control:

Install the core dependencies

npm install @base-ui/react lucide-react

pnpm add @base-ui/react lucide-react

yarn add @base-ui/react lucide-react

bun add @base-ui/react lucide-react

Copy the source code

import * as React from 'react';import { mergeProps } from '@base-ui/react/merge-props';import { useRender } from '@base-ui/react/use-render';import { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';import { cn } from '@/lib/utils';function McBreadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {  return (    <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />  );}function McBreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        'm-0 list-none border-0 p-0 flex flex-wrap items-center gap-1.5 paragraph-md font-medium text-muted-foreground',        className      )}      {...props}    />  );}function McBreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {  return (    <li      data-slot="breadcrumb-item"      className={cn('inline-flex items-center gap-1', className)}      {...props}    />  );}function McBreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>) {  return useRender({    defaultTagName: 'a',    props: mergeProps<'a'>(      {        className: cn(          'no-underline transition-colors text-muted-foreground hover:text-foreground hover:no-underline',          className        ),      },      props    ),    render,    state: {      slot: 'breadcrumb-link',    },  });}function McBreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn('font-normal paragraph-md font-medium text-foreground', className)}      {...props}    />  );}function McBreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn('text-muted-foreground [&>svg]:size-3.5', className)}      {...props}    >      {children ?? <ChevronRightIcon className="cn-rtl-flip translate-y-px" />}    </li>  );}function McBreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn(        'flex size-5 items-center justify-center text-muted-foreground [&>svg]:size-4',        className      )}      {...props}    >      <MoreHorizontalIcon />      <span className="sr-only">More</span>    </span>  );}export {  McBreadcrumb,  McBreadcrumbList,  McBreadcrumbItem,  McBreadcrumbLink,  McBreadcrumbPage,  McBreadcrumbSeparator,  McBreadcrumbEllipsis,};

Adjust import paths

Ensure your @/lib/utils or equivalent classname helper is correctly imported.

Usage

import {
  McBreadcrumb,
  McBreadcrumbItem,
  McBreadcrumbLink,
  McBreadcrumbList,
  McBreadcrumbPage,
  McBreadcrumbSeparator,
} from '@/components/ui/mc-breadcrumb';

export default function Example() {
  return (
    <McBreadcrumb>
      <McBreadcrumbList>
        <McBreadcrumbItem>
          <McBreadcrumbLink href="/">Home</McBreadcrumbLink>
        </McBreadcrumbItem>
        <McBreadcrumbSeparator />
        <McBreadcrumbItem>
          <McBreadcrumbPage>Current Page</McBreadcrumbPage>
        </McBreadcrumbItem>
      </McBreadcrumbList>
    </McBreadcrumb>
  );
}

Examples

Default

<McBreadcrumb>
  <McBreadcrumbList>
    <McBreadcrumbItem>
      <McBreadcrumbLink href="/">Home</McBreadcrumbLink>
    </McBreadcrumbItem>
    <McBreadcrumbSeparator />
    <McBreadcrumbItem>
      <McBreadcrumbLink href="/components">Components</McBreadcrumbLink>
    </McBreadcrumbItem>
    <McBreadcrumbSeparator />
    <McBreadcrumbItem>
      <McBreadcrumbPage>Breadcrumb</McBreadcrumbPage>
    </McBreadcrumbItem>
  </McBreadcrumbList>
</McBreadcrumb>

With Ellipsis

Use McBreadcrumbEllipsis to collapse intermediate items in long paths.

<McBreadcrumb>
  <McBreadcrumbList>
    <McBreadcrumbItem>
      <McBreadcrumbLink href="/">Home</McBreadcrumbLink>
    </McBreadcrumbItem>
    <McBreadcrumbSeparator />
    <McBreadcrumbItem>
      <McBreadcrumbEllipsis />
    </McBreadcrumbItem>
    <McBreadcrumbSeparator />
    <McBreadcrumbItem>
      <McBreadcrumbLink href="/components">Components</McBreadcrumbLink>
    </McBreadcrumbItem>
    <McBreadcrumbSeparator />
    <McBreadcrumbItem>
      <McBreadcrumbPage>Breadcrumb</McBreadcrumbPage>
    </McBreadcrumbItem>
  </McBreadcrumbList>
</McBreadcrumb>

Custom Separator

You can provide custom separator content through McBreadcrumbSeparator children.

<McBreadcrumb>
  <McBreadcrumbList>
    <McBreadcrumbItem>
      <McBreadcrumbLink href="/">Home</McBreadcrumbLink>
    </McBreadcrumbItem>
    <McBreadcrumbSeparator>/</McBreadcrumbSeparator>
    <McBreadcrumbItem>
      <McBreadcrumbPage>Docs</McBreadcrumbPage>
    </McBreadcrumbItem>
  </McBreadcrumbList>
</McBreadcrumb>

API Reference

Props

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes
`...props`	`ComponentProps<'nav'>`	`-`	Native `<nav />` attributes

All props from the native <nav /> element are supported.

MC Breadcrumb

On this page