Dokumentation

DokumentationHeaders

Da normalerweise auf jeder Seite nur ein Header vorkommt, verlieren, die anderen Header hier auf der Seite ihr Navigationsmöglichkeit. Sie dienen also nur der optischen Ansicht.

Header Komplett

Hier sind alle Elemente aufgenommen, die es im Header gibt.

Header Variante Off-Canvas

Vereinfachte Version mit "Header-Menü" und Off-Canvas Main-Menü.

Header Variante Mega Menü

Eine Version mit dem Mega Main-Menü erfordert dann die Off-Canvas für die kleineren Breakpoints.

Anmerkungen

Mega-Menü

Zu beachten ist, dass ab dem Breakpoint, in dem das Mega-Menu nicht mehr dargestellt werden kann, die Offcanvas-Variante die Darstellung des Mega-Menüs übernimmt.


// Mega-Menu

<nav class="d-none d-xxl-block" aria-label="Hauptnavigation">[...]</nav>



// Offcanvas-Menu

<button class="offcanvas-nav__toggler hamburger d-flex d-xxl-none [...]" [...] ">[...]</button>

Suchleiste

Ähnliches gilt für Elemente, wie z.B. die Suche. Wenn sie keinen Platz mehr findet, wird sie ab dem Breakpoint unten in dem Offcanvas-Menü mit aufgenommen.


// Searchbar

<form class="col d-none d-lg-block" role="search">



// Offcanvas-Menu add Searchbar

[...]
<div class="offcanvas-nav__level offcanvas-nav__level--root" data-offcanvas-level="root">
    [...]

    <ul class="list-unstyled mb-0 d-block d-lg-none"> 

        <li> 

            <form class="p-4" role="search"> 

                [...]

HTML-Aufbau

Blöcke

Der Header ist so aufgebaut, dass einzelne optionale Blöcke entfernt werden können ohne die umliegende HTML-Struktur anpassen zu müssen.

Das HTML in den <!-- > BLOCK [BLOCKNAME] --> Kommentaren ist optional und kann nach Bedarf eingesetzt oder entfernt werden. Zu beachten sind die Anmerkungen oben. 


<header id="site-header" class="site-header">
    <!-- > BLOCK TOPBAR -->
    <div class="container-fluid bg-secondary text-white d-flex py-1 px-4 px-md-6">
        <small>Handwerkskammer für Musterstadt und Landkreis</small>
    </div>
    <!-- < BLOCK TOPBAR -->
    <div class="container-fluid bg-white d-flex align-items-center px-4 px-md-6">
        <div class="row flex-grow-1">
            <div class="col col-md-auto d-flex align-items-center">
                <!-- > LOGO --><a class="navbar-brand d-inline-block me-6" href="./">
                <img src="./images/logo-hwk-muster.svg" alt="Logo Handwerkskammer Musterstadt" width="242" height="40" class="ms-0 d-none d-md-block">
                <img src="./images/hwk.svg" alt="Logo Handwerkskammer Musterstadt" width="80" height="25" class="ms-0 d-md-none">
            </a><!-- < LOGO --><!-- > BLOCK SITENAME --><span class="fs-3 text-secondary d-none d-md-inline-block">Bildungsportal</span><!-- < BLOCK SITENAME -->
            </div>
            <div class="col">
                <div class="d-flex align-items-center justify-content-end py-4 gap-6">
                    <!-- > SEARCH -->
                    <form class="col d-none d-lg-block" role="search">
                        <div class="input-group">
                            <input type="search" class="form-control" placeholder="Suchbegriff eingeben" aria-label="Suchbegriff eingeben" aria-describedby="button-search">
                            <button id="button-search" class="btn btn-light" type="submit" aria-label="Suche starten">
                                <i class="hwki hwki-suche" aria-hidden="true"></i>
                            </button>
                        </div>
                    </form>
                    <!-- < SEARCH -->
                    <!-- > BLOCK LINKS -->
                    <ul class="navbar-nav flex-row align-items-center column-gap-5">
                        <li class="nav-item mb-0">
                            <a class="nav-link d-flex align-items-center gap-1 p-0 text-secondary hover-bg" href="#" aria-label="Einfache Sprache">
                                <i class="hwki hwki-barrierefreiheit" aria-hidden="true"></i>
                                <span class="d-none d-xl-inline-block">Einfache Sprache</span>
                            </a>
                        </li>
                        <li class="nav-item mb-0">
                            <a class="nav-link d-flex align-items-center gap-1 p-0 text-secondary hover-bg dark-mode-toggle btn-default" role="button" aria-label="Dark-Light Mode umschalten" aria-pressed="false">
                                <i class="hwki hwki-schwarz-weiss" aria-hidden="true"></i>
                                <span class="dark-mode-toggle-label visually-hidden">Dark</span>
                            </a>
                        </li>
                    </ul>
                    <!-- < BLOCK LINKS -->

                    <!-- > BLOCK OFFCANVAS MENU -->
                    <button class="offcanvas-nav__toggler hamburger hover-bg btn btn-link d-flex align-items-center text-secondary d-xxl-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#mainOffcanvas" aria-controls="mainOffcanvas" aria-expanded="false" aria-label="Hauptmenü öffnen">
                        <span class="hamburger__bar" aria-hidden="true"></span>
                        <span class="hamburger__bar" aria-hidden="true"></span>
                        <span class="hamburger__bar" aria-hidden="true"></span>
                    </button>

                    [OFFVANVAS_MENU_CONTENT]
                    <!-- < BLOCK OFFCANVAS MENU -->
                </div>
                <!-- > BLOCK MEGA MENU -->
                [MEGA_MENU]
                <!-- < BLOCK MEGA MENU -->
            </div>
        </div>
    </div>
</header>

[OFFVANVAS_MENU_CONTENT]

Hier wird nur jeweils der erste Menüpunkt jeder Ebene mit aufgenommen, die anderen Einträge sind mit [...] nur noch angedeutet.

Die fetten Einträge müssen angepasst werden..


<div class="offcanvas offcanvas-end offcanvas-nav" tabindex="-1" data-bs-scroll="false" id="mainOffcanvas" aria-label="Menü">
    <div class="offcanvas-body p-0">
        <nav class="offcanvas-nav__panels" aria-label="Hauptnavigation">
            <div class="offcanvas-nav__level offcanvas-nav__level--root" data-offcanvas-level="root">
                <ul class="list-unstyled mb-0">
                    <li>
                        <a class="offcanvas-nav__link" aria-expanded="false" aria-controls="offcanvasAusbildung" data-offcanvas-open="offcanvasAusbildung" data-offcanvas-href="./ausbildung.html" href="./ausbildung.html">
                            <span>Ausbildung</span>
                            <i class="hwki hwki-pfeil-rechts" aria-hidden="true"></i>
                        </a>
                    </li>
                    [...]
                </ul>

                <ul class="list-unstyled mb-0 d-block d-lg-none">
                    <li>
                        <!-- > SEARCH > lg -->
                        <form class="p-4" role="search">
                            <div class="input-group">
                                <input type="search" class="form-control" placeholder="Suchbegriff eingeben" aria-label="Suchbegriff eingeben" aria-describedby="button-search-offcanvas">
                                <button id="button-search-offcanvas" class="btn btn-light" type="submit" aria-label="Suche starten">
                                    <i class="hwki hwki-suche" aria-hidden="true"></i>
                                </button>
                            </div>
                        </form>
                        <!-- < SEARCH -->
                    </li>
                </ul>
            </div>

            <div class="offcanvas-nav__level offcanvas-nav__level--sub" id="offcanvasAusbildung" data-offcanvas-level="ausbildung" inert="">
                <div class="offcanvas-nav__back">
                    <button type="button" class="offcanvas-nav__back-btn" data-offcanvas-back="" aria-label="Zurück zum Hauptmenü">
                        <i class="hwki hwki-pfeil-links" aria-hidden="true"></i>
                    </button>
                    <a class="offcanvas-nav__back-link" data-offcanvas-back-link="" href="#">Ausbildung</a>
                </div>
                <div class="offcanvas-nav__group">
                    <a class="offcanvas-nav__group-toggle" aria-expanded="false" aria-controls="offcanvasAusbildungGroup1" data-offcanvas-href="./ausbildung-finden.html" href="./ausbildung-finden.html">
                        <span>Ausbildung finden</span>
                        <i class="hwki hwki-pfeil-runter" aria-hidden="true"></i>
                    </a>
                    <div class="offcanvas-nav__sublist" id="offcanvasAusbildungGroup1" inert="">
                        <ul class="offcanvas-nav__sublist-inner list-unstyled">
                            <li class="d-xl-none"><a class="offcanvas-nav__sublink" href="./ausbildung-finden.html">Übersicht <i class="hwki hwki-pfeil-rechts" aria-hidden="true"></i></a></li>
                            <li><a class="offcanvas-nav__sublink" href="[...]">[...] <i class="hwki hwki-pfeil-rechts" aria-hidden="true"></i></a></li>
                            [...]
                        </ul>
                    </div>
                </div>
                <div class="offcanvas-nav__group">
                    [...]
                </div>
                [...]
            </div>

            <div class="offcanvas-nav__level offcanvas-nav__level--sub" id="offcanvasWeiterbildung" data-offcanvas-level="weiterbildung" inert="">
                [...]
            </div>
            [...]
        </nav>
    </div>
</div>

[MEGA_MENU]

Hier wird nur jeweils der erste Menüpunkt jeder Ebene mit aufgenommen, die anderen Einträge sind mit [...] nur noch angedeutet.

Die fetten Einträge müssen angepasst werden..


<nav class="d-none d-xxl-block" aria-label="Hauptnavigation">
    <ul class="nav main-nav">
        <li class="nav-item has-mega-submenu">
            <a class="nav-link dropdown-toggle" href="./ausbildung.html" role="button" aria-expanded="false" aria-controls="megaAusbildung" id="megaAusbildungBtn">Ausbildung</a>
            <div class="hwk-mega shadow" id="megaAusbildung" aria-labelledby="megaAusbildungBtn">
                <div class="row px-6 py-4">
                    <div class="col-lg-3 d-flex flex-column gap-4">
                        <div class="hwk-mega__group">
                            <a class="hwk-mega__link hwk-mega__link--heading" href="./ausbildung-finden.html" tabindex="-1">Ausbildung finden
                                <i class="hwki hwki-pfeil-rechts" aria-hidden="true"></i> </a>
                            <ul class="list-unstyled mb-0">
                                <li><a class="hwk-mega__link" href="./lehrstellenboerse.html" tabindex="-1">Lehrstellenbörse
                                    <i class="hwki hwki-pfeil-rechts" aria-hidden="true"></i></a>
                                </li>
                                <li>[...]</li>
                                [...]
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 d-flex flex-column gap-4">
                        <div class="hwk-mega__group">
                            <a class="hwk-mega__link hwk-mega__link--heading" href="#" tabindex="-1">[...] </a>
                            <ul class="list-unstyled mb-0">
                                [...]
                            </ul>
                        </div>
                        <div class="hwk-mega__group">
                            [...]
                        </div>
                    </div>
                    <div class="col-lg-3 d-flex flex-column gap-4">
                        [...]
                    </div>
                    <div class="col-lg-3 d-flex flex-column gap-4">
                        [...]
                    </div>
                </div>
            </div>
        </li>
        <li class="nav-item has-mega-submenu">
            [...]
        </li>
        [...]
    </ul>
</nav>