Breadcrumb

breadcrumb-1779393693067.tsx

'use client'
export default function Breadcrumb({ items = [
  { label: 'Home', href: '#' },
  { label: 'Components', href: '#' },
  { label: 'Navigation', href: '#' },
  { label: 'Breadcrumb' },
] }) {
  return (
    <nav style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px' }}>
      {items.map((item, i) => (
        <span key={i} style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
          {i > 0 && <span style={{ color: '#cbd5e1', fontSize: '14px' }}>›</span>}
          {item.href ? (
            <a
              href={item.href}
              style={{
                color: '#6d28d9', fontSize: '14px', fontWeight: 500,
                textDecoration: 'none', padding: '4px 6px', borderRadius: '6px',
                transition: 'background 0.15s',
              }}
              onMouseEnter={e => e.target.style.background = '#f5f3ff'}
              onMouseLeave={e => e.target.style.background = 'transparent'}
            >{item.label}</a>
          ) : (
            <span style={{ color: '#94a3b8', fontSize: '14px', padding: '4px 6px' }}>{item.label}</span>
          )}
        </span>
      ))}
    </nav>
  )
}

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Responsive breadcrumb navigation with chevron separators

More from Navigation

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface FloatingDockProps {
  icons: { id: number; src: string; }[];
}

class FloatingDock extends React.Component<FloatingDockProps, {}> {
  constructor(props: FloatingDockPro

FloatingDock

Navigation

'use client'
import { useState } from 'react'

const NAV = [
  { id: 'home', icon: '◉', label: 'Overview', shortcut: 'G H' },
  { id: 'components', icon: '⬡', label: 'Components', shortcut: 'G C', badge: 120, children: [
    { id: 'buttons', label: '

SidebarNav

Navigation

'use client';

import React from 'react';

interface PaginationNavProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const PaginationNav: React.FC<PaginationNavProps> = ({ currentPage, totalPages, onPageCh

PaginationNav

Navigation

'use client';

import React, { useState } from 'react';

interface Tab {
  id: number;
  label: string;
}

const tabs: Tab[] = [
  { id: 1, label: 'Tab 1' },
  { id: 2, label: 'Tab 2' },
  { id: 3, label: 'Tab 3' },
  { id: 4, label: 'Tab 4' },
];

c

TabsNav

Navigation