Breadcrumb
A navigation component that displays the current page's location within a hierarchical structure, helping users understand their position in the website's hierarchy and navigate between levels.Basic Breadcrumb
The breadcrumb component can be created by calling the UI::breadcrumb() method.
Breadcrumb Examples
Here are examples of different ways to use the breadcrumb component.Breadcrumb with Custom CSS Classes
The olClass() method allows adding custom CSS classes to the ordered list.
Breadcrumb with Active Item as Last Item
Items with an empty href are automatically marked as active and non-clickable.
Breadcrumb with HtmlElement as Content
The label property can accept both strings and HtmlElement objects for more complex content.
API
The breadcrumb component extends fromHtmlElement so it has all its methods available.API PHP
Common alternative names: Navigation Path, Location Path, Site Path, Hierarchical Navigation, Path Navigation, Location Breadcrumb, Site Hierarchy
Types: Default Breadcrumbs, Custom Styled Breadcrumbs, Active Breadcrumbs, HTML Content Breadcrumbs
Principles
Hierarchical Navigation
Breadcrumbs provide a clear path through the site's hierarchy, helping users understand their location and navigate between levels.
Visual Clarity
Through consistent styling and clear separators, breadcrumbs make the navigation path immediately understandable to users.
Progressive Disclosure
Breadcrumbs reveal the full path to the current location, helping users understand the context of their current position.
Anatomy
- Item
- Hierarchy Separator
Individual navigation links in the path (<li> elements with class 'breadcrumb-item')
The hierarchy separator (<i> element with class 'bi bi-arrow-right' or <i> element with class 'bi bi-chevron-right')
Usage
Use breadcrumbs to help users understand their location within a website's hierarchy and provide easy navigation between different levels. They're particularly effective for deep website structures, e-commerce sites, and content-heavy applications. Breadcrumbs should always start from the home page and show the complete path to the current page.