NoRedInk / noredink-ui / Nri.Ui.BreadCrumbs.V2

Patch changes:

- when only 1 breadcrumb is present, just render as a styled h1 or h2 directly, without nav semantics

Changes from V1:

- 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

Creating breadcrumbs


type BreadCrumbs route

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


type BreadCrumbAttribute route

icon : Nri.Ui.Svg.V1.Svg -> BreadCrumbAttribute route

iconSize : Css.Px -> BreadCrumbAttribute route

Viewing breadcrumbs

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.

Managing focus and page title

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