Skip to content

Use Breadcrumbs to display page hierarchy.

Known issues

Responsiveness

Breadcrumbs is not optimized for responsive designs.

Accessibility

Breadcrumbs renders a list of links within a nav element and has an implicit landmark role of navigation. By default, the component labels the nav element with "Breadcrumbs" which helps distinguish the type of navigation. Additionally, the component will always render the last link, which should represent the current page, with an aria-current="page" attribute.

For more information on the breadcrumbs pattern implemented by this component, see WAI-ARIA 1.1 Breadcrumb.

Arguments

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Slots

Items

NameTypeDefaultDescription
hrefStringN/AThe URL to link to.
system_argumentsHashN/ASystem arguments

Examples

Basic

<%= render(Primer::Beta::Breadcrumbs.new) do |component| %>
<% component.item(href: "/") do %>Home<% end %>
<% component.item(href: "/about") do %>About<% end %>
<% component.item(href: "/about/team") do %>Team<% end %>
<% end %>