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