Component Library
Browse and explore components
Breadcrumb
A Breadcrumb is a UI component used to display the navigational path and help users understand their location within a website or app.
Default Breadcrumb
Component Code
Copy Code
import { Breadcrumb, BreadcrumbItem } from 'flowbite-react';
import { HiHome } from 'react-icons/hi';
const BDefaultCode = () => {
return (
<div>
<Breadcrumb aria-label="Default breadcrumb example" className="justify-start! w-auto!">
<BreadcrumbItem href="#" icon={HiHome}>
Home
</BreadcrumbItem>
<BreadcrumbItem href="#">Projects</BreadcrumbItem>
<BreadcrumbItem>matdash IM</BreadcrumbItem>
</Breadcrumb>
</div>
);
};
export default BDefaultCode;
Background Color
Component Code
Copy Code
import { Breadcrumb, BreadcrumbItem } from 'flowbite-react'
import { HiHome } from 'react-icons/hi'
const BbgColor = () => {
return (
<div>
<Breadcrumb
aria-label='Solid background breadcrumb example'
className='bg-black/5 px-5 py-3 dark:bg-white/5 rounded-md'>
<BreadcrumbItem href='#' icon={HiHome}>
Home
</BreadcrumbItem>
<BreadcrumbItem href='#'>Projects</BreadcrumbItem>
<BreadcrumbItem>matdash IM</BreadcrumbItem>
</Breadcrumb>
</div>
)
}
export default BbgColor
API ( Breadcrumb )
| Prop | Description | Type | Default |
|---|---|---|---|
icon | An optional icon to display alongside the breadcrumb item. | 'HiHome' | - |