Breadcrumbs

Navigate effectively through Bramble UI's breadcrumbs component. Streamline user journeys and provide clear website navigation for improved user experiences.

Usage

import {Breadcrumbs} from '@/ui'

return (			
	<Breadcrumbs />
)

Options

Small

<Breadcrumbs size='sm' />

Large

<Breadcrumbs size='lg' />

RTL

dir='rtl'
<Breadcrumbs />

Styling

<Breadcrumbs className='invert italic' /> // Add any Tailwind classes

HTML

<nav class="breadcrumbs" aria-label="breadcrumb">
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/components">components</a></li>
		<li class="active" aria-current="page">breadcrumbs</li>
	</ol>
</nav>

CSS

.breadcrumbs {
        
	@apply text-base w-full lg:max-w-6xl mx-auto;

	&.sm {
		@apply text-sm;
	}      

	&.lg {
		@apply text-lg;
	}

	&.xl {
		@apply text-xl;
	}

	& > ol {
		@apply flex;
	}

	& li {
		@apply ps-[var(--breadcrumb-px)] first:ps-0 capitalize;
	}

	& li:not(:first-of-type)::before {
		@apply float-left rtl:float-right content-[var(--breadcrumb-separator)] rtl:content-[var(--breadcrumb-separator-rtl)] pe-[var(--breadcrumb-px)];
	}
                
}

Variables

 // Spacing between
--spacing-3: 0.75rem;
--breadcrumb-px: var(--spacing-3);

// Separator
--breadcrumb-separator: /002F;
--breadcrumb-separator-rtl: /005C;