Use Breadcrumbs
to display page hierarchy.
Breadcrumbs
is not optimized for responsive designs.
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.
Name | Type | Default | Description |
---|---|---|---|
system_arguments | Hash | N/A | System arguments |
Items
Name | Type | Default | Description |
---|---|---|---|
href | String | N/A | The URL to link to. |
system_arguments | Hash | N/A | System arguments |
<%= 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 %>