Wake Creators LogoCSS - Components Squid Style
Getting Started
Content
Layout
Forms
Components
Accordion CollapseAlertBadgeBoxBreadcrumbButtonCardDropdownLoaderModalPaginationProgress BarStepsTabsTagToastToolip
Utilities
Styleguide

Dropdown

Toggle contextual overlays for displaying lists of links and more. To change the opening direction, just add the attribute data-dropdown-position like data-dropdown-position='left top'

Attention: the use of the components needs the squid.js included in the project
Attention + 1: Probably the interaction via Javascript should not work well in SPA applications (independent of the framework React, Angular, Vuejs, etc). For now we have no implementation but we will create in the future, for now just use the styles and create your own implementation
  • Link
  • Sample Text
  • I`m a plain dropdown

    This is a paragraph

<button
  type="button"
  data-dropdown
>
  <!-- Button content data-dropdown is required -->
  <!-- data-dropdown-position to change where dropdown if opened. Values: right bottom, right top, left bottom, left top -->
</button>
<ul class="dropdown">
  <li>
    <!-- Common Item Like <a> or <button> or forms -->
  </li>
  <li>
    <!-- Custom HR -->
    <hr class="dropdown-divider" />
  </li>
  <li>
    <div class='dropdown-plain'>
      <!-- Plain HTML -->
    </div>
  </li>
</ul>