Blocks

Breadcrumb

Shows the user's location within a site hierarchy and allows navigation to ancestor pages.

Usage

Build the breadcrumb by composing breadcrumb_list, breadcrumb_item, breadcrumb_link, breadcrumb_separator, and breadcrumb_page.

sui.breadcrumb do
  sui.breadcrumb_list do
    sui.breadcrumb_item do
      sui.breadcrumb_link "Home", root_path
    end
    sui.breadcrumb_separator
    sui.breadcrumb_item do
      sui.breadcrumb_link "Components", "#"
    end
    sui.breadcrumb_separator
    sui.breadcrumb_item do
      sui.breadcrumb_page "Breadcrumb"
    end
  end
end

With ellipsis

Use breadcrumb_ellipsis to collapse middle segments in long paths.

sui.breadcrumb do
  sui.breadcrumb_list do
    sui.breadcrumb_item do
      sui.breadcrumb_link "Home", root_path
    end
    sui.breadcrumb_separator
    sui.breadcrumb_item do
      sui.breadcrumb_ellipsis
    end
    sui.breadcrumb_separator
    sui.breadcrumb_item do
      sui.breadcrumb_link "Components", "#"
    end
    sui.breadcrumb_separator
    sui.breadcrumb_item do
      sui.breadcrumb_page "Breadcrumb"
    end
  end
end

API

Method	Key args	Default	Description
breadcrumb	—	—	Root `<nav>` with `aria-label="breadcrumb"`.
breadcrumb_list	—	—	Ordered list (`<ol>`) that wraps all items.
breadcrumb_item	—	—	Individual `<li>` wrapper for a link, page, or ellipsis.
breadcrumb_link(name, url)	—	—	Clickable ancestor link. Accepts the same arguments as Rails `link_to`.
breadcrumb_page(name)	—	—	Non-clickable current page label with `aria-current="page"`.
breadcrumb_separator	—	chevron-right icon	Visual divider between items. Pass a block to render a custom separator.
breadcrumb_ellipsis	—	more-horizontal icon	Collapsed segment indicator. Renders a `more-horizontal` icon by default.