Breadcrumb
The Breadcrumb is a simple navigation component that displays the path to the current page through a series of hierarchical links. It is ideal for enhancing user experience, helping users easily understand their location within a website or app, making navigation more intuitive and seamless.
Additional Examples
With Custom Separator
Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator, allowing for greater flexibility and personalization in your breadcrumb navigation design.
With Dropdown
You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown within the breadcrumb, allowing for additional navigation options in a compact format.
Collapsed State
The responsive <BreadcrumbEllipsis /> component automatically shows a collapsed state when the breadcrumb length exceeds the available space, ensuring a clean and user-friendly navigation experience.
Fully Responsive
Here’s an example of a responsive breadcrumb that composes <BreadcrumbItem /> with <BreadcrumbEllipsis />, <DropdownMenu />, and <Drawer /> to create a flexible and space-efficient navigation system. It displays a dropdown on desktop and a drawer on mobile.
Configurable Props
Due to it's simplistic nature, the Breadcrumb component does not have many customizable options. However, you can use the className prop to add custom styles to the component. If you require more advanced customization, you can create a custom component using the Breadcrumb component as a base and apply your desired styles.