Navigáció
A navigációs komponensek segítik a felhasználókat a HR portálon való eligazodásban és a szükséges információk gyors elérésében.
Fejléc navigáció
A fejléc navigáció a weboldal tetején helyezkedik el, és elsődleges navigációs eszközként szolgál a HR portál fő szekciói között.
Asztali fejléc
Kódpélda
<div class="bg-white border-b border-[#E0E0E0] p-4 flex items-center justify-between">
<div class="flex items-center">
<div class="mr-8">
<AudiLogo size="md" />
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-[#f50537] font-medium">Kezdőlap</a>
<a href="#" class="text-[#333333] hover:text-[#f50537]">Önkiszolgáló portál</a>
<a href="#" class="text-[#333333] hover:text-[#f50537]">Dokumentumok</a>
<a href="#" class="text-[#333333] hover:text-[#f50537]">HR Információk</a>
</div>
</div>
<div class="flex items-center space-x-4">
<UButton color="gray" variant="link" class="p-0"><i class="fa-solid fa-bell"></i></UButton>
<UButton color="gray" variant="link" class="p-0"><i class="fa-solid fa-user"></i></UButton>
</div>
</div>
Mobil fejléc
e
Kódpélda
<div class="bg-white border-b border-[#E0E0E0] p-4 flex items-center justify-between">
<div class="flex items-center">
<UButton color="audi-red" variant="link" class="mr-4"><i class="fa-solid fa-bars"></i></UButton>
<AudiLogo size="sm" />
</div>
<div class="flex items-center space-x-4">
<UButton color="gray" variant="link" class="p-0"><i class="fa-solid fa-bell"></i></UButton>
<UButton color="gray" variant="link" class="p-0"><i class="fa-solid fa-user"></i></UButton>
</div>
</div>
Oldalsáv navigáció
Az oldalsáv navigáció az oldal bal vagy jobb szélén helyezkedik el, és másodlagos navigációs eszközként szolgál a HR portálon.
Alap oldalsáv
Többszintű oldalsáv
Kódpélda
<div class="bg-white w-64 min-h-[400px] border-r border-[#E0E0E0]">
<div class="p-4 border-b border-[#E0E0E0]">
<h4 class="font-medium">HR Portál</h4>
</div>
<div class="p-2">
<ul class="space-y-1">
<li>
<a href="#" class="block px-4 py-2 rounded-[4px] bg-[#F0F9F4] text-[#f50537] font-medium">
<i class="fa-solid fa-home mr-2"></i>
Kezdőlap
</a>
</li>
<li>
<a href="#" class="block px-4 py-2 rounded-[4px] text-[#333333] hover:bg-[#F5F5F5]">
<i class="fa-solid fa-user-clock mr-2"></i>
Szabadságkezelés
</a>
</li>
<!-- További menüpontok -->
</ul>
</div>
</div>
Breadcrumb (morzsanavigáció)
A breadcrumb (morzsanavigáció) segít a felhasználóknak megérteni, hogy hol találhatók a HR portál hierarchiájában, és lehetőséget biztosít a könnyű visszalépésre.
Kódpélda
<div class="flex items-center text-sm text-[#666666]">
<a href="#" class="hover:text-[#f50537]">Kezdőlap</a>
<i class="fa-solid fa-chevron-right mx-2 text-xs"></i>
<a href="#" class="hover:text-[#f50537]">HR Portál</a>
<i class="fa-solid fa-chevron-right mx-2 text-xs"></i>
<a href="#" class="hover:text-[#f50537]">Dokumentumok</a>
<i class="fa-solid fa-chevron-right mx-2 text-xs"></i>
<span>Szabályzatok</span>
</div>
Használati irányelvek
Fejléc navigáció
- A legfontosabb, magas szintű oldalakra mutasson
- Maximum 5-7 menüpontot tartalmazzon
- Mobilon hamburger menübe rendezze át a menüpontokat
- Az aktív oldalt mindig emelje ki
Oldalsáv navigáció
- Részletesebb, több menüpontot tartalmazhat
- Jól kategorizált, hierarchikus struktúrába rendezett legyen
- Az aktív oldalt és szülő kategóriát emelje ki
- Szükség esetén legyen összecsukható
Breadcrumb (morzsanavigáció)
- Minden aloldalon jelenjen meg a kezdőlaptól induló hierarchia
- Az utolsó elem ne legyen kattintható, hiszen az az aktuális oldal
- Konzisztens elválasztó elemeket használjon (általában > jel)
- Mobilnézeten, ha túl hosszú, automatikusan rövidítse
Akadálymentesség
- A navigációs komponensek legyenek billentyűzettel kezelhetőek
- A breadcrumb használjon nav és aria-label attribútumokat
- Az aktív elemek aria-current="page" attribútummal rendelkezzenek
- A legördülő menük aria-expanded attribútummal jelezzék állapotukat