Breadcrumps

1npm install lucide-react

1'use client';
2
3// Import Types
4// Import External Packages
5import { usePathname } from 'next/navigation';
6import Link from 'next/link';
7// Import Components
8// Import Functions & Actions & Hooks & State
9import { capitalize, cn } from '@/lib/utils';
10// Import Data
11// Import Assets & Icons
12import { ChevronRight, HomeIcon } from 'lucide-react';
13
14/**
15 * Renders a breadcrumb component that displays the current page's path.
16 * @returns The breadcrumb component.
17 */
18export default function Breadcrumps() {
19	const pathname = usePathname();
20	const pathArray = pathname.split('/');
21
22	return (
23				<div className="flex items-center py-4 text-sm text-muted-foreground">
24			<Link href="/" className="px-2 sm:px-0" aria-describedby="home button">
25				<HomeIcon className="h-5 w-5 sm:h-4 sm:w-4" />
26			</Link>
27
28			<div className="flex flex-wrap">
29				{pathArray.length > 1
30					? pathArray.slice(1).map((path, index) => (
31							<div key={path} className="flex items-center leading-10">
32								<ChevronRight className="h-4 w-4" />
33								<div
34									className={cn(
35										pathArray.length - 2 === index
36											? 'font-medium text-foreground'
37											: 'text-sm text-muted-foreground'
38									)}
39								>
40									<Link href={pathArray.slice(0, index + 2).join('/')}>
41										{path
42											.split('-')
43											.map((w) => capitalize(w))
44											.join(' ')}
45									</Link>
46								</div>
47							</div>
48						))
49					: null}
50			</div>
51		</div>
52	);
53}

1import Breadcrumps from '@/components/Breadcrumps';
2
3export default function Page(){
4    return(
5        <Breadcrumps/>
6    )
7}