LFUI 4.2.0
LFUI 3.4.0
Breadcrumbs lets the user get a sense of where they are in your application and offers a way to navigate upwards in the site tree.
Breadcrumbs are a part of the page templates on lansforsakringar.se and Mina sidor and are generated automatically, so there isn't much to think about regarding breadcrumbs for you as a designer of customer facing web applications.
If you are designing an internal system you should consider whether breadcrumbs are of benefit for your users. In a smaller, flat system you might not see the need, but the larger the system, the bigger the need probably is (especially as the navigation structure gets deeper and deeper).
Breadcrumb is a simple navigation component that only requires a nav
container and a ol
list. The dividers are automatically created in the content of the ::before
pseudo-element ofli
tags.
You can inform the current page using the active
modifier on a li
tag
nav
with aria-label="Breadcrumb"
identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.aria-current="page"
is applied to the last link in the set to indicate that it represents the current page.