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;