Breadcrumb
Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.
Breadcrumb()( BreadcrumbItem()("Catalog"), BreadcrumbItem()("Clothing"), BreadcrumbItem()("Women's"), BreadcrumbItem()("Shirts & Tops"))Examples
Breadcrumb Links
By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you'll need to add event listeners to handle clicks.
For websites, you'll probably want to use links instead. You can make any breadcrumb item a link by applying an href attribute to it. Now, when the user activates it, they'll be taken to the corresponding page — no event listeners required.
Breadcrumb()( BreadcrumbItem(_.href := "https://example.com/home")("Homepage"), BreadcrumbItem(_.href := "https://example.com/home/services")("Our Services"), BreadcrumbItem(_.href := "https://example.com/home/services/digital")("Digital Media"), BreadcrumbItem(_.href := "https://example.com/home/services/digital/web-design")("Web Design"))Start & End Decorations
Use the start and end slots to add presentational elements like <wa-icon> next to any breadcrumb item.
Breadcrumb()( BreadcrumbItem( _.slots.start(Icon(_.name := "house")()) )("Home"), BreadcrumbItem()("Articles"), BreadcrumbItem( _.slots.end(Icon(_.name := "tree-palm")()) )("Traveling"))Custom Separators
Use the separator slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
Breadcrumb( _.slots.separator(Icon(_.name := "angles-right", _.variant := "solid")()) )( BreadcrumbItem()("First"), BreadcrumbItem()("Second"), BreadcrumbItem()("Third"))Breadcrumb( _.slots.separator(Icon(_.name := "arrow-right", _.variant := "solid")()) )( BreadcrumbItem()("First"), BreadcrumbItem()("Second"), BreadcrumbItem()("Third"))Breadcrumb( _.slots.separator(span("/")) )( BreadcrumbItem()("First"), BreadcrumbItem()("Second"), BreadcrumbItem()("Third"))Custom Colors
Breadcrumb labels match the color set on <wa-breadcrumb-item>. Content in the start, end, and separator slots can be styled using CSS parts.
Breadcrumb()( className := "redcrumbs", BreadcrumbItem( _.slots.start(Icon(_.name := "house", _.variant := "solid")()) )("Home"), BreadcrumbItem()("Articles"), BreadcrumbItem()("Traveling")).redcrumbs wa-breadcrumb-item { color: firebrick;}.redcrumbs wa-breadcrumb-item:last-of-type { color: crimson;}.redcrumbs wa-breadcrumb-item::part(separator) { color: pink;}.redcrumbs wa-breadcrumb-item::part(start),.redcrumbs wa-breadcrumb-item::part(end) { color: currentColor;}With Dropdowns
Dropdown menus can be placed in the default slot to provide additional options.
Breadcrumb()( BreadcrumbItem()("Homepage"), BreadcrumbItem()( Dropdown( _.slots.trigger( Button(_.size.small, _.appearance.filled, _.pill := true)( Icon(_.label := "More options", _.name := "ellipsis", _.variant := "solid")() ) ) )( DropdownItem(_.`type` := "checkbox", _.checked := true)("Web Design"), DropdownItem(_.`type` := "checkbox")("Web Development"), DropdownItem(_.`type` := "checkbox")("Marketing") ) ), BreadcrumbItem()("Our Services"), BreadcrumbItem()("Digital Media"))Alternatively, you can place dropdown menus in a start or end slot.
Breadcrumb()( BreadcrumbItem()("Homepage"), BreadcrumbItem()("Our Services"), BreadcrumbItem()("Digital Media"), BreadcrumbItem( _.slots.end( Dropdown( _.slots.trigger( Button(_.size.small, _.appearance.filled, _.pill := true)( Icon(_.label := "More options", _.name := "ellipsis", _.variant := "solid")() ) ) )( DropdownItem(_.`type` := "checkbox", _.checked := true)("Web Design"), DropdownItem(_.`type` := "checkbox")("Web Development"), DropdownItem(_.`type` := "checkbox")("Marketing") ) ) )("Web Design"))