Nijmegen Component Library
You are viewing version 3 of the library, the latest version is

Button Horizontal Collapse 

<div class="horizontal-collapse">
    <button class="btn-floating btn-large btn-floating-primary btn-floating-collapse" aria-label="Hoe kunt u ons bereiken/volgen" aria-controls="follow_us_section" aria-expanded="false">
        <span class="mdi mdi-message-processing" aria-hidden="true" title="Hoe kunt u ons bereiken/volgen"></span>
    </button>
    <ul class="expand-horizontal animated" id="follow_us_section" hidden>
        <li>
            <a href="tel:+3114024" aria-label="Bel ons">
                <span class="mdi mdi-phone" aria-hidden="true" title="Bel ons"></span>
            </a>
        </li>
        <li>
            <button aria-label="Vind iets in de buurt">
                <span class="mdi mdi-near-me" aria-hidden="true" title="Vind iets in de buurt"></span>
            </button>
        </li>
        <li>
            <a href="mailto:gemeente@nijmegen.nl" aria-label="Mail ons">
                <span class="mdi mdi-email" aria-hidden="true" title="Mail ons"></span>
            </a>
        </li>
        <li>
            <a href="https://www.facebook.com/gemeentenijmegen" aria-label="Vind ons op Facebook">
                <span class="mdi mdi-facebook-box" aria-hidden="true" title="Vind ons op Facebook"></span>
            </a>
        </li>
        <li>
            <a href="https://twitter.com/gem_nijmegen" aria-label="Volg ons op Twitter">
                <span class="mdi mdi-twitter-box" aria-hidden="true" title="Volg ons op Twitter"></span>
            </a>
        </li>
        <li class="btn-floating-wrapper"></li>
    </ul>
</div>

Button Horizontal Collapse

A custom component created for Nijmegen.

Accessibility

Be sure to add textual content using aria-label to the anchors or buttons so this will be available to assistive technologies. Icons should be hidden from screen-readers by applying aria-hidden="true" to the child span mdi element.