Vibes logo

Breadcrumbs

Breadcrumbs are used to display the current page's location within a hierarchy and enable easy navigation.

Installation

Run the following command

npx vibes@latest add breadcrumbs

Usage

import { Breadcrumbs, type Breadcrumb } from '@/vibes/soul/sections/breadcrumbs';function Usage() {  const breadcrumbs: Breadcrumb[] = [    {      label: 'Home',      href: '#1',    },    {      label: 'Bags',      href: '#2',    },    {      label: 'Handle Bags',      href: '#3',    },  ];  return (      <Breadcrumbs breadcrumbs={breadcrumbs} />  );}

API Reference

PropTypeDefault
breadcrumbs*
Streamable<Breadcrumb[]>
className
string
PropTypeDefault
label
string
href
string

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --breadcrumbs-font-family: var(--font-family-body);  --breadcrumbs-primary-text: var(--foreground);  --breadcrumbs-secondary-text: var(--contrast-500);  --breadcrumbs-icon: var(--contrast-500);  --breadcrumbs-hover: var(--primary);}