PatternLab (0.1.259)

# Custom Select-Dropdown

TIP

Uses Panel as base: c-panel.-is-dropdown

  • The Button has an attribute data-target='#panelID' referring to the panel-ID and the classes -dropdown js-select
  • The Panel needs the classes c-panel -is-dropdown and optionally: -has-backdrop -close-backdrop (= dark layer in the backdrop and close with click on layer)
  • The Panel contains a Linklist with the classes c-list -linklist.
  • Use the extra class js-external-links if the list contains external links.
  • Use .-is-scrollable on .c-panel__inner if you want the panel to be scrollable.

# Example Dropdown

hide code 
<div class="h-inline-block h-pos-relative">
    <button class="c-btn -small -icon-left -dropdown -light js-select" data-target="#globalAreaNavWrap">
        <span class="h-color-apothecary m-r-xs"><i class="fas fa-circle"></i></span>
        Apotheker
    </button>
    <div class="c-panel -close-backdrop -is-dropdown -arrow-up-right -is-small" id="globalAreaNavWrap" role="menu" aria-haspopup="true">
        <div class="c-panel__inner">
            <h6>Bereich wählen</h6>
            <ul class="c-list -linklist -fullwidth m-t-s" id="globalAreaNav">
                <li class="c-list__item -is-subpages">
                    <a class="c-link -icon-left">
                        <span class="h-color-student m-r-xs"><i class="fas fa-circle"></i></span>
                        Studenten
                    </a>
                </li>
                <li class="c-list__item -is-subpages">
                    <a class="c-link -icon-left">
                        <span class="h-color-phip m-r-xs"><i class="fas fa-circle"></i></span>
                        PhiP
                    </a>
                </li>
                <li class="c-list__item -is-active -is-current -is-subpages">
                    <a class="c-link -icon-left">
                        <span class="h-color-apothecary m-r-xs"><i class="fas fa-circle"></i></span>
                        Apotheker
                    </a>
                </li>
                <li class="c-list__item -is-subpages">
                    <a class="c-link -icon-left">
                        <span class="h-color-pta m-r-xs"><i class="fas fa-circle"></i></span>
                        PTA
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

← Fancybox →