Dropdown

INFO

A Dropdown is a list of links or buttons that appears when the user interacts with a trigger element. It is used to display a list of options or actions that the user can choose from.

This component is based on the Panel Module, which provides the basic structure and functionality for the dropdown. The dropdown can be triggered by a button or any other element with the appropriate data attributes.

Example

c-panel.-is-dropdown

TIP

For a more detailed description of all classes and options, see Panel Module, which is the base for the Modal.

Bereich wählen

• Studenten
• PhiP
• Apotheker
• PTA

Show 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 -is-dropdown -close-backdrop -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>

TIP

• 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 Link List 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.