Dropdown - Wilout UI

Basic Dropdown

<div class="ui-dropdown">
  <button class="ui-btn ui-btn--primary" data-ui-toggle="dropdown">
    Dropdown
  </button>
  <div class="ui-dropdown__menu">
    <a href="#" class="ui-dropdown__item">Action</a>
    <a href="#" class="ui-dropdown__item">Another action</a>
    <div class="ui-dropdown__divider"></div>
    <a href="#" class="ui-dropdown__item">Separated link</a>
  </div>
</div>

<div class="ui-dropdown">
  <button class="ui-btn ui-btn--primary"
          data-ui-toggle="dropdown"
          ng-click="onDropdownToggle()">
    {{ dropdownLabel }}
  </button>
  <div class="ui-dropdown__menu">
    <a href="#" class="ui-dropdown__item" ng-repeat="item in items"
       ng-click="onItemClick(item)">{{ item.label }}</a>
    <div class="ui-dropdown__divider"></div>
    <a href="#" class="ui-dropdown__item">{{ separatedLink }}</a>
  </div>
</div>

<div class="ui-dropdown">
  <button class="ui-btn ui-btn--primary"
          data-ui-toggle="dropdown"
          (click)="onDropdownToggle()">
    {{ dropdownLabel }}
  </button>
  <div class="ui-dropdown__menu">
    <a href="#" class="ui-dropdown__item" *ngFor="let item of items"
       (click)="onItemClick(item)">{{ item.label }}</a>
    <div class="ui-dropdown__divider"></div>
    <a href="#" class="ui-dropdown__item">{{ separatedLink }}</a>
  </div>
</div>

<div className="ui-dropdown">
  <button className="ui-btn ui-btn--primary"
          data-ui-toggle="dropdown"
          onClick={handleDropdownToggle}>
    {dropdownLabel}
  </button>
  <div className="ui-dropdown__menu">
    {items.map(item => (
      <a href="#" className="ui-dropdown__item" key={item.id}
         onClick={() => handleItemClick(item)}>{item.label}</a>
    ))}
    <div className="ui-dropdown__divider"></div>
    <a href="#" className="ui-dropdown__item">{separatedLink}</a>
  </div>
</div>

Dropdown Variants

Use different button styles for dropdown triggers.

<div class="ui-dropdown">
  <button class="ui-btn ui-btn--secondary" data-ui-toggle="dropdown">Secondary</button>
  <div class="ui-dropdown__menu">
    <a href="#" class="ui-dropdown__item">Action</a>
  </div>
</div>

<div class="ui-dropdown">
  <button class="ui-btn ui-btn--success" data-ui-toggle="dropdown">Success</button>
  <div class="ui-dropdown__menu">...</div>
</div>

Menu Alignment

Use ui-dropdown__menu--end for right-aligned menus.

<!-- Left aligned (default) -->
<div class="ui-dropdown">
  <button data-ui-toggle="dropdown">Left</button>
  <div class="ui-dropdown__menu">...</div>
</div>

<!-- Right aligned -->
<div class="ui-dropdown">
  <button data-ui-toggle="dropdown">Right</button>
  <div class="ui-dropdown__menu ui-dropdown__menu--end">...</div>
</div>

With Headers

Add headers to organize dropdown items.

<div class="ui-dropdown">
  <button data-ui-toggle="dropdown">With Header</button>
  <div class="ui-dropdown__menu">
    <h6 class="ui-dropdown__header">Dropdown Header</h6>
    <a href="#" class="ui-dropdown__item">Action</a>
    <a href="#" class="ui-dropdown__item">Another action</a>
  </div>
</div>

Events

Dropdown emits custom events that you can listen to.

Event	Description
`ui:dropdown:show`	Fired before showing (cancelable)
`ui:dropdown:shown`	Fired after shown
`ui:dropdown:hide`	Fired before hiding (cancelable)
`ui:dropdown:hidden`	Fired after hidden

document.addEventListener('ui:dropdown:shown', (e) => {
  console.log('Dropdown opened');
});

document.addEventListener('ui:dropdown:hidden', (e) => {
  console.log('Dropdown closed');
});

// In your controller
angular.module('app').controller('DropdownCtrl', function($scope, $document) {
  $document[0].addEventListener('ui:dropdown:shown', function(e) {
    $scope.$apply(function() {
      $scope.isOpen = true;
      console.log('Dropdown opened');
    });
  });

  $document[0].addEventListener('ui:dropdown:hidden', function(e) {
    $scope.$apply(function() {
      $scope.isOpen = false;
      console.log('Dropdown closed');
    });
  });
});

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({ ... })
export class DropdownComponent implements OnInit, OnDestroy {
  isOpen = false;
  private shownHandler = () => { this.isOpen = true; console.log('Dropdown opened'); };
  private hiddenHandler = () => { this.isOpen = false; console.log('Dropdown closed'); };

  ngOnInit() {
    document.addEventListener('ui:dropdown:shown', this.shownHandler);
    document.addEventListener('ui:dropdown:hidden', this.hiddenHandler);
  }

  ngOnDestroy() {
    document.removeEventListener('ui:dropdown:shown', this.shownHandler);
    document.removeEventListener('ui:dropdown:hidden', this.hiddenHandler);
  }
}

import { useEffect, useState } from 'react';

function DropdownExample() {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const handleShown = () => { setIsOpen(true); console.log('Dropdown opened'); };
    const handleHidden = () => { setIsOpen(false); console.log('Dropdown closed'); };

    document.addEventListener('ui:dropdown:shown', handleShown);
    document.addEventListener('ui:dropdown:hidden', handleHidden);

    return () => {
      document.removeEventListener('ui:dropdown:shown', handleShown);
      document.removeEventListener('ui:dropdown:hidden', handleHidden);
    };
  }, []);

  return ( /* ... */ );
}

CSS Classes Reference

Class	Description
`.ui-dropdown`	Base dropdown container
`.ui-dropdown__menu`	Dropdown menu container
`.ui-dropdown__menu--end`	Right-align the menu
`.ui-dropdown__menu--show`	Shows the menu (added by JS)
`.ui-dropdown__item`	Menu item
`.ui-dropdown__divider`	Separator between items
`.ui-dropdown__header`	Section header