Skip to main content
Glama
breadcrumb.tsx2.22 kB
import { Slot } from '@radix-ui/react-slot'; import { ChevronRight, MoreHorizontal } from 'lucide-react'; import type * as React from 'react'; import { cn } from '@/lib/utils'; function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) { return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />; } function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) { return ( <ol data-slot="breadcrumb-list" className={cn( 'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', className )} {...props} /> ); } function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) { return ( <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1.5', className)} {...props} /> ); } function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & { asChild?: boolean; }) { const Comp = asChild ? Slot : 'a'; return ( <Comp data-slot="breadcrumb-link" className={cn('hover:text-foreground transition-colors', className)} {...props} /> ); } function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) { return ( <span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" className={cn('text-foreground font-normal', className)} {...props} /> ); } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) { return ( <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} {...props} > {children ?? <ChevronRight />} </li> ); } function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) { return ( <span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" className={cn('flex size-9 items-center justify-center', className)} {...props} > <MoreHorizontal className="size-4" /> <span className="sr-only">More</span> </span> ); } export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis };

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/eyaltoledano/claude-task-master'

If you have feedback or need assistance with the MCP directory API, please join our Discord server