BreadcrumbNav

breadcrumbnav-1779379195897.tsx

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

const PATHS = [
  ['Home', 'Components', 'Dashboard', 'Analytics', 'Revenue'],
  ['Home', 'Docs', 'API Reference'],
  ['Home', 'Settings', 'Account', 'API Keys'],
]

export default function BreadcrumbNav() {
  const [pathIdx, setPathIdx] = useState(0)
  const [copied, setCopied] = useState(false)
  const [showAll, setShowAll] = useState(false)

  const path = PATHS[pathIdx]
  const collapsed = !showAll && path.length > 3
  const visible = collapsed ? [path[0], '...', path[path.length - 1]] : path

  function copy() {
    navigator.clipboard.writeText('/' + path.join('/').toLowerCase())
    setCopied(true)
    setTimeout(() => setCopied(false), 1500)
  }

  return (
    <div style={{ padding: 32, background: '#0A0A0A', display: 'flex', flexDirection: 'column', gap: 20 }}>
      <div style={{ display: 'flex', gap: 8 }}>
        {PATHS.map((p, i) => (
          <button key={i} onClick={() => { setPathIdx(i); setShowAll(false) }} style={{ background: pathIdx === i ? 'rgba(201,168,76,0.1)' : 'rgba(255,255,255,0.04)', border: '1px solid', borderColor: pathIdx === i ? 'rgba(201,168,76,0.25)' : 'rgba(255,255,255,0.08)', color: pathIdx === i ? '#C9A84C' : 'rgba(255,255,255,0.4)', borderRadius: 6, padding: '5px 12px', cursor: 'pointer', fontSize: 12 }}>
            {p.length} levels
          </button>
        ))}
      </div>

      {/* Standard */}
      <div>
        <div style={{ color: 'rgba(255,255,255,0.3)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>Default</div>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 4, background: '#111', border: '1px solid rgba(255,255,255,0.06)', borderRadius: 10, padding: '10px 14px', width: 'fit-content' }}>
          {visible.map((seg, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
              {i > 0 && <span style={{ color: 'rgba(255,255,255,0.2)', fontSize: 14 }}>/</span>}
              {seg === '...' ? (
                <button onClick={() => setShowAll(true)} style={{ background: 'rgba(255,255,255,0.08)', border: 'none', color: 'rgba(255,255,255,0.5)', borderRadius: 5, padding: '2px 8px', cursor: 'pointer', fontSize: 13 }}>···</button>
              ) : (
                <span style={{ color: i === visible.length - 1 ? '#F5F5F0' : 'rgba(255,255,255,0.4)', fontSize: 13, fontWeight: i === visible.length - 1 ? 600 : 400, cursor: i < visible.length - 1 ? 'pointer' : 'default' }}>{seg}</span>
              )}
            </div>
          ))}
          <button onClick={copy} title="Copy path" style={{ marginLeft: 8, background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.08)', color: copied ? '#22c55e' : 'rgba(255,255,255,0.35)', borderRadius: 5, padding: '2px 6px', cursor: 'pointer', fontSize: 11, transition: 'color 0.2s' }}>
            {copied ? '✓' : '📋'}
          </button>
        </nav>
      </div>

      {/* Pill style */}
      <div>
        <div style={{ color: 'rgba(255,255,255,0.3)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>Pill style</div>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
          {path.map((seg, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
              {i > 0 && <span style={{ color: 'rgba(255,255,255,0.15)', fontSize: 14 }}>›</span>}
              <span style={{ background: i === path.length - 1 ? 'rgba(201,168,76,0.12)' : 'rgba(255,255,255,0.04)', border: '1px solid', borderColor: i === path.length - 1 ? 'rgba(201,168,76,0.25)' : 'rgba(255,255,255,0.06)', color: i === path.length - 1 ? '#C9A84C' : 'rgba(255,255,255,0.45)', padding: '3px 10px', borderRadius: 20, fontSize: 12, fontWeight: i === path.length - 1 ? 600 : 400 }}>{seg}</span>
            </div>
          ))}
        </nav>
      </div>
    </div>
  )
}

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Breadcrumb navigation with collapsible middle items, dropdown on overflow, and copy path

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