1. Komponenty

Menu

angl. Menu

Jedná se o horní část stránky, která obsahuje primární navigaci na webu nebo v aplikaci (klientské zóně).

Menu webové stránky s rozbaleným megamenu.

Menu klientské zóny.

Úvod

Menu je základní prvek webu nebo aplikace (klientské zóny), který slouží k navigaci v rámci struktury (informační architektury). Položky v menu odpovídají první úrovni. Více informací o informační architektuře najdete v sekci Jak na informační architekturu. Menu je součástí hlavičky.

Obecné rozložení webové stránky nebo aplikace (klientské zóny).

Obecné rozložení stránky

Webová stránka

Příkladem je menu Portálu veřejné správy, které je možné modifikovat. Příkladem modifikace je použití tzv. megamenu, které je uvedeno v ukázce. V megamenu se nachází další úrovně informační architektury (IA). Použití megamenu není povinné, odvíjí se od potřeb daného projektu.

Primární navigace

Menu primární úroveň

Menu s primární úrovní je společné pro všechny stránky webu.

  • 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 zkratkám)
  • Je možné přepisovat nebo měnit jejich počet dle aktuálních potřeb webové stránky
  <div class="navigation">
    <ul class="nav nav--primary">
        <li class="nav__item">
            <a href="#" class="nav__link active">Životní situace</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Formuláře</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Otevřená data</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Věstníky</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Zveřejněné informace</a>
        </li>
      </ul>
  </div>

Menu může, kromě položek primární úrovně, obsahovat také následující části:

  • Odkaz na přihlášení do klientské zóny
  • Přepínač jazyků
  • Logo (po kliknutí se uživatel dostane vždy na úvodní stránku)
  • Infolinku

Sekundární úroveň

Menu se sekundární úrovní může být obsaženo v megamenu. Megamenu se používá pouze v případě webové stránky, nikoliv pro klientskou zónu. Zároveń však musí být zobrazeno vždy na stránkách nižší úrovně. Nižší úrovní jsou ty stránky, které jsou zanořeny pod Úvodní stránku (Homepage).

Menu sekundární úroveň

Upozornění: Příklad na obrázku zcela nesplňuje směrnici o přístupnosti webového obsahu WCAG 2.1. V budoucnu bude nahrazen adekvátním příkladem.

  • Nadpis - označení nadřazené úrovně (primární úroveň)
  • Aktivní položka - vybraná (zobrazená) stránka
  • Položka menu - další položka menu, kterou lze vybrat

Klientská zóna

Klientská zóna je přístupná až po přihlášení. Typickou ukázkou klientské zóny je Portál občana. Menu klientské zóny vychází z menu webové stránky.

Primární navigace

Menu klientské zóny

Menu s primární úrovní je společné pro všechny stránky klientské zóny.

  • 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 zkratkám)
  • Je možné přepisovat nebo měnit jejich počet dle aktuálních potřeb klientské zóny

Menu může, kromě položek primární úrovně, obsahovat také následující části:

  • Odkaz na odhlášení z klientské zóny
  • Odkaz do veřejné části (uživatel po kliknutí zůstane přihlášen)
  • Logo (po kliknutí se uživatel dostane vždy na úvodní stránku)
  • Odkaz do nastavení klientské zóny
  • Notifikační centrum (s počtem nepřečtených zpráv)
  • Stejně jako u webu je možné přepisovat nebo měnit jejich počet dle aktuálních potřeb klientské zóny

Sekundární navigace

V případě klientské zóny se nepoužívá megamenu. Sekundární navigace musí být vždy na podstránkách klientské zóny.

Příkladem je navigace datové schránky na Portálu občana, která je společná pro více účtů:

Ukázka navigace vč. akordeonu

Upozornění: Příklad na obrázku zcela nesplňuje směrnici o přístupnosti webového obsahu WCAG 2.1. V budoucnu bude nahrazen adekvátním příkladem.

  • Nadpis - označení nadřazené úrovně (primární úroveň)
  • Tlačítko - primární tlačítko pro vyvolání nejdůležitější akce na dané stránce (např. Napsat zprávu)
  • Rozkliknutý akordeon - slouží pro přepínání mezi účty
  • Popisek sekce - obsahuje doplňující informace o účtu
  • Notifikace - označuje počet nepřečtených zpráv
  • Aktivní položka - označuje právě zobrazenou podstránku
  • Položka menu - další položka menu, kterou lze vybrat
  • Schovaný akordeon - výchozí stav akordeonu, opakem je rozkliknutý akordeon
  • Tlačítko - outline tlačítko pro vyvolání méně důležitých akcí (např. přidání účtu)

Responzivní (RWD) menu

Slouží pro zobrazení na menších zařízeních.

Standartní menu se zobrazuje pro tyto typy zařízení:

  • Large - ≥992px
  • Extra large - ≥1200px

RWD menu pak používáme pro tyto typy zařízení:

  • Medium - ≥768px
  • Small - ≥576px
  • Extra small - <576px

Více o typech zařízení najdete na stránce Mřížka.

Primární navigace

V případě RWD menu je primární navigace schována pod tzv. hamburger menu. Nepoužívejte nikdy ikonu bez označení MENU.

Zabalené RWD Menu

Výchozí stav RWD menu.

Zabalené RWD Menu

Jakmile uživatel klikne na hamburger menu rozbalí se nabídka s primární navigací.

Rozbalené RWD Menu

Rozbalené RWD Menu

Upozornění: Příklad na obrázku zcela nesplňuje směrnici o přístupnosti webového obsahu WCAG 2.1. V budoucnu bude nahrazen adekvátním příkladem.

Po kliknutí na ikonu close nebo ZAVŘÍT, dojde k zabalení menu do jeho výchozího stavu.

Užitečné odkazy