Navigation

Haupt-Navigation

<header class="site-header NavType-stwb headroom sticky-top not-root headroom--not-bottom headroom--pinned headroom--top">


    <nav class="navbar navbar-expand-lg navbar-dark bg-white stwbNavbar">
        <div class="container">
            <a class="navbar-brand" href="/">
                <img class="stwb-logo" alt="Stadtwerke Bamberg"
                     src="/img/logo-stwb.svg" >
            </a>
            <div class="collapse navbar-collapse navbar-main-top" id="navbar-collapse">
                <ul class="nav navbar-nav mx-auto">
                    <li class="nav-item sub">
                        <a href="" class="sub d-inline-block nav-link">Energie</a>
                    </li>
                    <li class="nav-item active sub">
                        <a href="#" class="active sub d-inline-block nav-link text-internet">Internet</a>
                    </li>
                    <li class="nav-item sub ">
                        <a href="#" class="sub d-inline-block nav-link ">Wasser</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="d-inline-block nav-link ">Mobilität</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="d-inline-block nav-link ">Bäder</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="d-inline-block nav-link">Geschäftskunden</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="sub d-inline-block nav-link">Netz</a>
                    </li>
                </ul>
                <div class="search-bar">
                    <div class="search">
                        <form method="get" class="search-form" action="#">
                            <input type="text" class="form-control search-label search-field" name="tx_solr[q]" placeholder="Suchbegriff..." value="" autocomplete="off">
                            <button type="submit" class="search-submit tx-solr-submit"><i
                                    class="icon icon-lg icon-search icon-search"></i></button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="search-toggler d-none d-lg-flex" onclick="$('body').toggleClass('search-open');">
                <i class="icon icon-search"></i>
                <i class="icon icon-add"></i>
            </div>
            <div class="kundenportal-dropdown d-none d-lg-flex position-relative">
                <div class="kundenportal-toggler" type="button" data-toggle="dropdown" aria-expanded="false">
                    <i class="icon icon-person"></i>
                </div>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="#" class="dropdown-item">
                        <i class="icon icon-devices"></i> Zählerstand melden
                    </a>
                    <a href="#" class="dropdown-item">
                        <i class="icon icon-devices"></i> Kundenportal Energie
                    </a>
                    <a href="#" class="dropdown-item">
                        <i class="icon icon-devices"></i> Kundenportal Multimedia
                    </a>
                </div>
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile" aria-controls="navbar-mobile" aria-expanded="false" aria-label="Navigation ein-/ausblenden">
                <span class="menu-toggle-icon"></span>
            </button>
        </div>
    </nav>


    <nav class="navbar d-none d-lg-flex navbar-expand-lg navbar-dark bg-internet stwbSubNavbar">
        <div class="container">
            <ul class="nav navbar-nav mx-auto ">
                <li class="nav-item active current has-subMenu nav-item">
                    <a href="#" class="active current d-inline-block nav-link">baMbit Internet</a>
                </li>
                <li class="nav-item has-subMenu nav-item">
                    <a href="#" class="d-inline-block nav-link">baMbit TV</a>
                </li>
                <li class="nav-item has-subMenu nav-item">
                    <a href="#" class="d-inline-block nav-link">Kunden werben Kunden</a>
                </li>
                <li class="nav-item has-subMenu nav-item">
                    <a href="#" class="d-inline-block nav-link">Freies WLAN</a>
                </li>
                <li class="nav-item has-subMenu nav-item">
                    <a href="#" class="d-inline-block nav-link">Service</a>
                </li>
                <li class="nav-item has-subMenu nav-item">
                    <a href="#" class="d-inline-block nav-link">Kundenportal</a>
                </li>
            </ul>
        </div>
    </nav>


    <nav class="collapse navbar-collapse stwb-mobile-menu bg-white" id="navbar-mobile">
        <ul class="navbar-nav mainmenu mr-auto">
            <li class="nav-item search-item">
                <div class="search-bar">
                    <div class="search">
                        <form method="get" class="search-form" action="#">
                            <input type="text" class="form-control search-label search-field" placeholder="Suchbegriff..." value="" autocomplete="off" >
                            <button type="submit" class="search-submit">
                                <i class="icon icon-lg icon-search icon-search"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </li>
            <li class="nav-item sub">
                <a href="#" data-toggle="collapse" data-target="#collapse-1-145" aria-expanded="false" aria-controls="collapse-1-145" class="sub nav-link submenu-toggler">
                    Energie <i class="icon icon-arrow-forward"></i>
                </a>
                <ul class="collapse navbar-nav level-0 list-unstyled submenu" id="collapse-1-145">
                    <a href="#" data-toggle="collapse" data-target="#collapse-1-145" aria-expanded="false" aria-controls="collapse-1-145" class="nav-link back-toggler">
                        <i class="icon icon-arrow-back"></i> Startseite
                    </a>
                    <a href="#" class="sub nav-link view-page">Energie Übersicht </a>
                    <li class="nav-item sub">
                        <a href="#" data-toggle="collapse" data-target="#collapse-2-42" aria-expanded="false" aria-controls="collapse-2-42" class="sub nav-link submenu-toggler">
                            Ökostrom <i class="icon icon-arrow-forward"></i>
                        </a>
                        <ul class="collapse navbar-nav level-1 list-unstyled submenu" id="collapse-2-42">
                            <a href="#" data-toggle="collapse" data-target="#collapse-2-42" aria-expanded="false" aria-controls="collapse-2-42" class="nav-link back-toggler">
                                <i class="icon icon-arrow-back"></i> Energie
                            </a>
                            <a href="#" class="sub nav-link view-page">Ökostrom Übersicht </a>
                            <li class="nav-item">
                                <a href="#" class="nav-link">Vorteilswelt </a>
                            </li>
                            <li class="nav-item">
                                <a href="#" class="nav-link">Stromkennzeichnung </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a href="#" class=" nav-link"> Smart Meter </a>
                    </li>
                </ul>
            </li>
            <li class="nav-item active sub">
                <a href="#" data-toggle="collapse" data-target="#collapse-1-248" aria-expanded="false" aria-controls="collapse-1-248" class="active sub nav-link submenu-toggler">
                    Internet <i class="icon icon-arrow-forward"></i>
                </a>
                <ul class="collapse navbar-nav level-0 list-unstyled submenu" id="collapse-1-248">
                    <a href="#" data-toggle="collapse" data-target="#collapse-1-248" aria-expanded="false" aria-controls="collapse-1-248" class=" nav-link back-toggler">
                        <i class="icon icon-arrow-back"></i> Startseite
                    </a>
                    <a href="#" class=" active sub nav-link view-page">Internet Übersicht </a>
                    <li class="nav-item active current ">
                        <a href="#" class=" active current nav-link"> baMbit Internet </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class=" nav-link"> baMbit TV </a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class=" nav-link">Kundenportal </a>
                    </li>
                </ul>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Wasser</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Mobilität</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link ">Bäder</a>
            </li>
            <li class="nav-item sub">
                <a href="#" class="nav-link">Geschäftskunden</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link kundenportal-nav-link">
                    <i class="icon icon-person"></i> Zählerstand melden
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link kundenportal-nav-link">
                    <i class="icon icon-person"></i> Kundenportal Energie
                </a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link kundenportal-nav-link">
                    <i class="icon icon-person"></i> Kundenportal Multimedia
                </a>
            </li>
        </ul>
    </nav>


</header>

Navigation Intranet

    <header class="site-header">
        <nav class="energize-navbar bg-white position-relative">
            <a class="logo" href="#">
                <img src="/img/logo-stwb.svg" alt="Stadtwerke Bamberg">
            </a>
            <div class="search">
                <form class="search-form">
                    <label class="search-label">
                        <input placeholder="Suchbegriff..." class="search-field form-control" value=""/>
                    </label>
                    <button class="search-submit">
                        <span class="icon-lg icon-search"></span>
                    </button>
                </form>
            </div>
            <div class="icon-item">
                <button class="burger" type="button" data-toggle="dropdown" aria-label="Navigation ein-/ausblenden">
                    <span class="icon-lg icon-menu"></span>
                </button>

                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="#">Personen</a>
                    <a class="dropdown-item" href="#">Gruppen</a>
                    <a class="dropdown-item" href="#">Neuigkeiten</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#" target="">Telefonbuch</a>
                    <a class="dropdown-item" href="#" target="">IT-Service</a>
                    <a class="dropdown-item" href="#" target="">Speiseplan</a>
                    <a class="dropdown-item" href="#" target="">Website</a>
                    <a class="dropdown-item" href="#" target="">Feedback</a>
                </div>
            </div>
            <div class="icon-item">
                <button class="notifications" type="button">
                    <span class="icon-lg icon-notifications"></span>
                </button>
                <span class="notification-number">
                <span>4</span>
            </span>
            </div>
            <div class="icon-item">
                <button type="button" data-toggle="dropdown">
                    <img src="https://picsum.photos/40/40" class="rounded-circle bg-dark text-light"/>
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="#">Profil bearbeiten</a>
                    <a class="dropdown-item" href="#">Abmelden</a>
                </div>
            </div>
        </nav>

    </header>