A-Z List

Eine A-Z-Liste kann mit dem Modul A to Z List dargestellt werden. Dieses Modul beinhaltet eine Navigation und die jeweiligen Abschnitte pro Buchstabe, mit der Möglichkeit eine Liste von Links pro Buchstabe anzuzeigen. Die Navigation besteht in diesem Fall aus Sprungmarken, die die Überschriften mit der entsprechenden ID in den Fokus scrollen.

.modul-azlist



<div class="modul-azlist" id="myazlist524">
    <nav class="azmap" aria-label="A bis Z Sprungmarken">
        <ul class="azlist-pager">
            <li><a href="#myazlist524-A">A</a></li>
            <li><a class="active" aria-current="page" href="#myazlist524-B">B</a></li>
            <li><a href="#myazlist524-S">S</a></li>
        </ul>    
    </nav>
    <ul class="list--clean" aria-label="A bis Z Liste">
        <li>
            <div class="azlist-letter" id="myazlist524-A">
                <strong class="letter">A</strong>
                <a class="to-top" href="#myazlist524">Zum Listenanfang</a>
            </div>
            <ul aria-labeledby="myazlist524-A">
                <li>
                    <a href="#">Aktuelles auf Berlin.de</a>
                </li>
                <li>
                    <a href="#">Alfred E. Neumann</a>
                </li>
                <li>
                    <a href="#">Alles zum Thema Corona</a>
                </li>
 
            </ul>
        </li>
        <li>
            <div class="azlist-letter" id="myazlist524-B">
                <strong class="letter">B</strong>
                <a class="to-top" href="#myazlist524">Zum Listenanfang</a>
            </div>
            <ul aria-labeledby="myazlist524-B">
                <li>
                    <a href="#">Blumen</a>
                </li>
                <li>
                    <a href="#">Bereiche</a>
                </li>
                <li>
                    <a href="#">Bezirke</a>
                </li>
 
            </ul>
        </li>
        <li>
            <div class="azlist-letter" id="myazlist524-S">
                <strong class="letter">S</strong>
                <a class="to-top" href="#myazlist524">Zum Listenanfang</a>
            </div>
            <ul aria-labeledby="myazlist524-S">
                <li>
                    <a href="#">Super Link</a>
                </li>
                <li>
                    <a href="#">Senatskanzlei</a>
                </li>
                <li>
                    <a href="#">Senatsverwaltungen</a>
                </li>
 
            </ul>
        </li>
 
    </ul>
</div>