- when only 1 breadcrumb is present, just render as a styled h1 or h2 directly, without nav semantics
- switch to list-based attributes pattern
Learn more about 'breadcrumbs' to help a user orient themselves within a site here: https://www.w3.org/WAI/WCAG21/Techniques/general/G65.
Wide Viewport:
Home
🏠 Home > 🦇 Category 1
🏠 > 🦇 Category 1 > 🧛 Sub-Category 2
Narrow Viewport:
Home
🏠 > 🦇 Category 1
🏠 > 🦇 > 🧛 Sub-Category 2
init : { id : String, text : String, route : route } -> List (BreadCrumbAttribute route) -> BreadCrumbs route
initSecondary : BreadCrumbs route -> { id : String, text : String, route : route } -> List (BreadCrumbAttribute route) -> BreadCrumbs route
after : BreadCrumbs route -> { id : String, text : String, route : route } -> List (BreadCrumbAttribute route) -> BreadCrumbs route
icon : Nri.Ui.Svg.V1.Svg -> BreadCrumbAttribute route
iconSize : Css.Px -> BreadCrumbAttribute route
view : { aTagAttributes : route -> List (Accessibility.Styled.Attribute msg), isCurrentRoute : route -> Basics.Bool, label : String } -> BreadCrumbs route -> Accessibility.Styled.Html msg
Usually, the label value will be the string "breadcrumbs".
It's configurable so that if more than one set of BreadCrumbs ever appear on the page, the aria-label for the nav can still be unique.
viewSecondary : { aTagAttributes : route -> List (Accessibility.Styled.Attribute msg), isCurrentRoute : route -> Basics.Bool, label : String } -> BreadCrumbs route -> Accessibility.Styled.Html msg
Usually, the label value will be the string "secondary breadcrumbs".
It's configurable so that if more than one set of BreadCrumbs ever appear on the page, the aria-label for the nav can still be unique.
headerId : BreadCrumbs route -> String
toPageTitle : BreadCrumbs a -> String
Generate an HTML page title using the breadcrumbs, in the form "SubCategory | Category | NoRedInk" for breadCrumbs like:
Category > SubCategory