View Source SaladUI.Breadcrumb (SaladUI v1.0.0-beta.3)
Implementation of breadcrumb component from https://ui.shadcn.com/docs/components/breadcrumb
Breadcrumbs help users navigate through the application by showing the current location and providing links to previous levels in the hierarchy.
Features
- Semantic HTML structure with proper ARIA attributes for accessibility
- Visual separators between navigation items
- Current page indication with proper styling
- Optional ellipsis for collapsed paths
- Responsive design capabilities
Examples
<.breadcrumb>
<.breadcrumb_list>
<.breadcrumb_item>
<.breadcrumb_link href="/">Home</.breadcrumb_link>
</.breadcrumb_item>
<.breadcrumb_separator />
<.breadcrumb_item>
<.breadcrumb_link href="/components">Components</.breadcrumb_link>
</.breadcrumb_item>
<.breadcrumb_separator />
<.breadcrumb_item>
<.breadcrumb_page>Breadcrumb</.breadcrumb_page>
</.breadcrumb_item>
</.breadcrumb_list>
</.breadcrumb>
For responsive breadcrumbs that collapse on mobile:
<.breadcrumb>
<.breadcrumb_list>
<.breadcrumb_item>
<.breadcrumb_link href="/">Home</.breadcrumb_link>
</.breadcrumb_item>
<.breadcrumb_separator />
<!-- Show on desktop only -->
<div class="hidden md:flex md:items-center">
<.breadcrumb_item>
<.breadcrumb_link href="/components">Components</.breadcrumb_link>
</.breadcrumb_item>
<.breadcrumb_separator />
</div>
<!-- Show on mobile only -->
<div class="md:hidden">
<.breadcrumb_ellipsis />
<.breadcrumb_separator />
</div>
<.breadcrumb_item>
<.breadcrumb_page>Breadcrumb</.breadcrumb_page>
</.breadcrumb_item>
</.breadcrumb_list>
</.breadcrumb>
Summary
Functions
Renders a breadcrumb.
Renders an ellipsis indicator for collapsed breadcrumb items.
Renders a breadcrumb item.
Renders a breadcrumb link.
Renders breadcrumb list.
Renders the current page breadcrumb item.
Renders a separator between breadcrumb items.
Functions
Renders a breadcrumb.
Attributes
:class
- Additional CSS classes to apply to the breadcrumb container
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders an ellipsis indicator for collapsed breadcrumb items.
Used in responsive designs to indicate that some breadcrumb items are hidden. Typically used for middle items in a long breadcrumb path on mobile views.
Attributes
:class
- Additional CSS classes to apply to the ellipsis
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Renders a breadcrumb item.
Individual item in the breadcrumb path that can contain a link or the current page.
Attributes
:class
- Additional CSS classes to apply to the item
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a breadcrumb link.
Used for all breadcrumb items except the current page.
Attributes
:class
- Additional CSS classes to apply to the link- Standard HTML link attributes (href, target, etc.) are supported
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted. Supports all globals plus:
["download", "href", "hreflang", "ping", "referrerpolicy", "rel", "target", "type"]
.
Slots
inner_block
(required)
Renders breadcrumb list.
Wraps the breadcrumb items in an ordered list to represent the hierarchical structure.
Attributes
:class
- Additional CSS classes to apply to the list
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders the current page breadcrumb item.
Used for the final item in the breadcrumb path, representing the current page. The current page is not a link but styled differently to indicate the current location.
Attributes
:class
- Additional CSS classes to apply to the current page element
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a separator between breadcrumb items.
Visual indicator that separates items in the breadcrumb path. By default, shows a chevron right icon.
Attributes
:class
- Additional CSS classes to apply to the separator
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.