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

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 : Svg -> BreadCrumbAttribute route

iconSize : Px -> BreadCrumbAttribute route

Viewing breadcrumbs

view :

{ aTagAttributes : route -> List (Attribute msg)

, isCurrentRoute : route -> Bool

, label : String

}

-> BreadCrumbs route

-> 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 (Attribute msg)

, isCurrentRoute : route -> Bool

, label : String

}

-> BreadCrumbs route

-> 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

NoRedInk/noredink-ui/24.1.0

Nri.Ui.BreadCrumbs.V2

Patch changes:

Changes from V1:

Managing focus and page title

Modules