A breadcrumb a felhasználó aktuális helyét és az elérési utat mutatja meg egy weboldalon vagy alkalmazásban.
Fejlesztői dokumentáció
Breadcrumb link: Az információs architektúra megfelelő szintjére mutató Link komponensek.
Separator: A linkeket vizuálisan elválasztó ikon.
Aktív oldal: A felhasználó aktuális helye.
Mobileszközökön vagy szűk helyeken csak az elérési út kezdőoldalát és a felhasználó aktuális helyét mutatjuk. A navigáció köztes lépéseit elrejthetjük.
A breadcrumb gyakran a fejléc része. Színes háttéren az inverted verziót használjuk.
A breadcrumb mindig a legmagasabb szintű oldallal – például a Főoldallal – kezdődik, és szintről szintre halad egyre mélyebbre az információs architektúrában a felhasználó aktuális helyéig.
Az aktív oldal nem linkel. Félkövérrel jelenik meg, hogy megkülönböztethető legyen a breadcrumb linkjeitől.
A komponens a design system sztenderd interakciós állapotainak logikáját követi.
Ha a breadcrumb hosszabb, mint a rendelkezésre álló hely, akkor a vége levágódik, és scrollozhatóvá válik.
A linkek interaktív területe magában foglalja a körülöttük lévő eltartást is, hogy nagyobb legyen az aktiválási felület.
A breadcrumbot két szintnél mélyebb navigációs hierarchia esetén érdemes használni. Kevés helyet foglal, mégis kontextust ad a felhasználó aktuális helyéről.
Egyszerű, egyszintű navigációs hierarchia esetén a breadcrumb csak növeli a vizuális zajt, ezért nem használjuk.
A breadcrumb kiegészítő navigációs elem, nem helyettesíti az elsődleges navigációt.
A breadcrumbot általában a bal felső sarokban – az elsődleges navigáció alatt, az oldal címe felett – helyezzük el.
A komponens a design system kontrasztcélokkal generált szemantikus színeit használja, ezért megfelel az akadálymentesítési követelményeknek. A tokenizálás miatt ez színsémától és sötét vagy világos módtól függetlenül igaz.
A komponens a design system sztenderd interakciós állapotainak logikáját követi, ezért a kontrasztcélok a komponens minden interaktív állapotánál biztosítottak.
A kontraszt minimumokat a design system legsötétebb – sötét módban a legvilágosabb – hátterén generáljuk, ezért ez az arány minden más használható háttéren ennél csak jobb lehet.
Ha a komponenst nem tokenizált háttérszínen használjuk, manuálisan ellenőrizni kell a kontrasztot!
A linkek interaktívak. A linkek között Tab billentyűvel lehet navigálni, és Enterrel aktiválni.
Az ikonok funkciója a vizuális elválasztás, ezért rejtettek az asszisztív technológiák elől.
A breadcrumb <nav> elemként implementált, alapértelmezetten “breadcrumb” aria-labellel.
A linkek listaelemként vannak megvalósítva.
