1. Komponenty

Hlavička

angl. Header

Jedná se o horní část stránky, která obsahuje primární navigaci na webu nebo v aplikaci.

Hlavička webu s rozbaleným megamenu

Hlavička klientské zóny s využitím ikon jako navigačních prvků

Web a klientská zóna

  • Podoba hlavičky se může mírně lišit podle toho, jestli je použita na webu (portálu) nebo v klientské zóně přístupné pouze po přihlášení
  • Hlavička může být použita na kterémkoli webu státní správy. V zásadě však existují tři základní typy použití:
    • pro hlavní stránku webu
    • pro obsahové stránky webu
    • pro klientskou zónu

Hlavní stránka webu

  • Příkladem je hlavička Portálu veřejné správy, kterou je možné modifikovat
  • Hlavička zde může mít na pozadí fotografii - při použití fotografie dbejte na dodržení příslušných kontrastů (doporučené jsou fotografie překryté 70% černým filtrem)

Obsahová stránka webu

  • Hlavička může obsahovat jiné prvky než na hlavní stránce
  • Není vhodné použití fotografie na pozadí

Klientská zóna

  • Hlavička může obsahovat větší množství navigačních prvků
  • Je vhodné použití ikon s ustáleným sémantickým významem, např. ozubené kolečko pro nastavení, zvoneček pro notifikace atd.

Ukázka navigačních prvků v klientské zóně Hlavička klientské zóny

Prvky hlavičky

Hlavička se skládá z následujících částí:

Položky navigace

  • Samotné položky primární navigace
  • Doporučený počet je 4-6 položek
  • Maximální počet položek v primární navigaci je 8
  • Názvy položek by měly být co nejkratší a ideálně jednoslovné (vyvarujte se, pokud možno, zkratkám)
  • Je možné přepisovat nebo měnit jejich počet dle aktuálních potřeb portálu nebo aplikace
  <div class="navigation">
    <ul class="nav nav--primary">
        <li class="nav__item">
            <a href="#" class="nav__link active">Občan</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Podnikatel</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Cizinec</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Úředník</a>
        </li>
      </ul>
  </div>

Další prvky navigace

Navigace na Portálu veřejné správy

  • Navigace může, kromě položek primárního menu, obsahovat také následující části:
    • Login/logout
    • Přepínač jazyků
    • Logo portálu nebo aplikace
    • Infolinku
    • … další položky

Vyhledávání

Vyhledávání na domovské stránce portálu veřejné správy

  • Pokud je na stránkách dostupné vyhledávání, musí být umístěno na hlavní stránce
  • Maximální počet parametrů, podle kterých je možné hledat, je omezený na 3 (např.: Instituce, Místo, Vzdálenost od místa)
  • Vyhledávač je možné schovat do hlavičky i na podstránkách (doporučena je volba subtilnější varianty)

Message Box

Příklad použití Message Boxu

  • Je prvkem obsahujícím důležité sdělení, které je součástí hlavičky
  • Může obsahovat logo nebo ikonu vztahující se ke sdělení
  • Může obsahovat tlačítko
  • Objevuje se pouze na hlavní stránce

Užitečné odkazy