A bottom navigation az alkalmazások elsődleges funkcióinak elérését biztosítja.
Menu item: Navigációs elem, amely ikonból és szövegből áll. A kiválasztott elem vizuális megkülönböztetést kap.
Container: A navigációs elemeket befoglaló terület.
A bottom navigation 3-5 menu itemet tartalmazhat. 5-nél több elsődleges funkció esetén érdemes magasabb szintű kategóriákba vagy egy “Továbbiak” menu item alá rendezni a funkciókat.
A komponens a design system sztenderd interakciós állapotainak logikáját követi.
A menu itemek szélessége legalább 3rem. Ez megfelelő területet biztosít az érintéssel való aktiváláshoz.
A kiválasztott menu item szövege és ikonja alapértelmezetten a brand színt veszi fel. A kiválasztott menu itemet aláhúzással is jelöljük.
A menu item szövege legyen minél tömörebb – lehetőleg 1-2 szó –, de pontosan írja le a funkciót. A funkció alatt elvégezhető akciók – pl. megtekintése, igénylése, stb. – elhagyhatók.
A bottom navigationt elsősorban natív mobilalkalmazások elsődleges navigációjára használjuk. Az implementáció és a használat során a platform natív design systemének (Android, iOS) követését ajánljuk.
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!
Nem használunk kizárólag színt az információk közlésére.
Az aktív állapotot a szöveg alatti indikátor is jelzi, így a színtévesztő vagy színvak, illetve a monokróm kijelzőt használó felhasználók is megkapják a szükséges információkat.
A komponens a Tab billentyűvel fókuszálható, a Space vagy az Enter billentyűvel aktiválható, és rendelkezik a design system sztenderd fókuszjelölőjével.
A menu itemek mindig tartalmaznak szöveges címkét, ezért az ikonok el vannak rejtve az asszisztív technológiák elől.
