Top navigation

A top navigation az alkalmazások tetején lévő navigációs komponens, amely meghatározza a képernyő kontextusát, lehetővé teszi a navigációt, a keresést és különböző akciók végrehajtását.

Felépítés

Back button: Az alkalmazáson belüli visszanavigálására szolgáló gomb. (opcionális)

Action button: A kontextushoz kapcsolódó akciók végrehajtására szolgáló Button komponens. (opcionális)

Title: Az aktuális oldal címe. (opcionális)

Search: Az alkalmazásban történő keresésre szolgáló Search field komponens. (opcionális)

Opciók Stílus

A top navigationt large és compact stílusban használhatjuk.

A large stílust általában kezdő- vagy kategóriaoldalaknál, a compact stílust aloldalaknál használjuk.

Háttér

A komponens neutral és brand színű, illetve átlátszó háttérrel használható.

Back button

A Back button – azaz az alkalmazáson belüli visszanavigálásra szolgáló gomb – kikapcsolható. Kezdő- és kategóriaoldalaknál nem használjuk.

Action button

Az Action buttonnel a kontextushoz kapcsolódó akciókat hajthatnak végre a felhasználók.

Több akció esetén egymás mellé rendezhetjük – ügyelve a minimális érintési területre –, illetve Dropdown vagy Tray komponenssel jeleníthetjük meg az akciókat.

Search field

A komponens Search fieldjével az alkalmazás teljes tartalmában vagy az adott felületen lehet keresni.

Működés Interakciós állapotok

A komponens interaktív elemei a design system sztenderd interakciós állapotainak logikáját követik.

Cím túlcsordulása

A hosszú címek több sorba törnek.

Interaktív területek

A komponens interaktív elemei önálló interaktív területeket képeznek.

Szövegírási útmutató

A top navigation címének világosan le kell írnia a képernyő tartalmát vagy célját. Legyen minél tömörebb, lehetőleg 1-2 szó vagy egy rövid mondat.

  • A cím lehet az alkalmazás neve (pl. Digitális Állampolgár).

  • A cím lehet az alkalmazás magasabb szintű szekciója (pl. Beállítások).

  • A cím leírhatja a folyamatot vagy részfolyamatot, amiben a felhasználó éppen benne van (pl. E-mail cím módosítása).

Bizonyos kontextusokban – például ha egy képernyőn egyetlen adatot kérünk be –, fogalmazhatunk felszólításként vagy kérdésként is (pl. Adja meg a jelszavát!; Hol született?).

Írásmód
  • Nagybetűvel kezdjük. Ügyelünk rá, hogy csak az első szó kezdőbetűje nagy!

  • Csak akkor használunk mondatvégi írásjelet, ha felszólításként vagy kérdésként fogalmaztunk.

Használati megfontolások Avatár használata

Ha az alkalmazásnak van felhasználói menüje vagy profilja, az Action button a felhasználó avatárja is lehet. Az avatárt alternatív szöveggel kell ellátni, hogy értelmezhető legyen az asszisztív technológiák számára.

Cím elrejtése

A top navigation általában az aktuális oldal címét tartalmazza. A cím segítségével a felhasználók könnyen beazonosíthatják, hol járnak, miközben navigálnak az alkalmazásban.

Ha az oldal tartalma elegendő kontextus ad vagy a top navigation címe csak ismételné a tartalmat, elrejthetjük a címet.

Top navigation ideiglenes elrejtése

Ha zavarná a felhasználói élményt – például fotók vagy dokumentumok megtekintésénél, kódok beolvasásánál –, ideiglenesen elrejthetjük a top navigationt.

Ilyenkor érdemes lehetővé tenni, hogy a felhasználók a megszokott gesztusokkal – például koppintással vagy lefelé húzással – visszaállíthassák a top navigationt.

Akadálymentesség Kontrasztarányok

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 kontraszt minimumokat a design system legsötétetebb – sötét módban a legvilágosabb – hátterén generáljuk, emiatt 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!

Színhasználat

A komponens állapotai és kiegészítő elemei nem kizárólag színnel közlik az információt. Í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.

Billentyűzettel való használat

Az interaktív elemek között a Tab billentyűvel lehet navigálni.

Ikonok

A csak ikont tartalmazó gomboknál a Button komponensben írt akadálymentesítési megfontolásokat kell követni.