Popper drop-down

Simple drop-down implementation using popper.js

by Eugene Trounev

HTML

<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
<p style="text-align:center">
<br><br><br><br><br><br><br><br><br><br><br><br>
<button id="trigger" aria-describedby="dropdown">
	Toggle
</button>
</p>
<div id="dropdown" class="docsie-tour-dropdown" role="tooltip">
		<ul class="docsie-tour-list">
			<li class="docsie-tour-item">
				<button class="docsie-tour-trigger">
					Item 1
				</button>
			</li>
			<li class="docsie-tour-item">
				<button class="docsie-tour-trigger">
					Item 2
				</button>
			</li>
			<li class="docsie-tour-item">
				<button class="docsie-tour-trigger">
					Item 3
				</button>
			</li>
			<li class="docsie-tour-item">
				<button class="docsie-tour-trigger">
					Item 4
				</button>
			</li>
			<li class="docsie-tour-item">
				<button class="docsie-tour-trigger">
					Item 5
				</button>
			</li>
		</ul>
</div>

SCSS

$background: #fff;
$text: #374151;

.docsie-tour-dropdown {
  * {
    appearance: none;
  }

  visibility: hidden;
  background-color: $background;
  color: $text;
  padding: 4px 0;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  font-size: 14px;
	line-height: 24px;
  min-width: 200px;
  max-width: 300px;
	max-height: 240px;
	overflow-y: auto;

  &.expanded {
    visibility: visible;
  }

  .docsie-tour-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    width: 100%;

    .docsie-tour-item {
      margin: 0;
      padding: 0;
      width: 100%;

      .docsie-tour-trigger {
        width: 100%;
        display: inline-block;
        border: none;
        border-radius: 0;
        padding: 8px 16px;
        margin: 0;
        text-decoration: none;
        background: transparent;
        color: $text;
        font-size: 1rem;
        cursor: pointer;
        text-align: left;
        font-family: inherit;
        outline: none;

        &:hover,
        &:focus,
        &:active {
          background: darken($background, 6)
        }
      }
    }
  }

  .docsie-tour-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    z-index: -1;

    &:before {
      position: absolute;
      width: 8px;
      height: 8px;
      z-index: -1;
      content: '';
      transform: rotate(45deg);
      background: $background;
    }
  }

  &[data-popper-placement^='top']>.docsie-tour-arrow {
    bottom: -4px;
  }

  &[data-popper-placement^='bottom']>.docsie-tour-arrow {
    top: -4px;
  }

  &[data-popper-placement^='left']>.docsie-tour-arrow {
    right: -4px;
  }

  &[data-popper-placement^='right']>.docsie-tour-arrow {
    left: -4px;
  }
}

JavaScript

const trigger = document.querySelector('#trigger');
const dropdown = document.querySelector('#dropdown');
const toggle = (e) => {
	e.preventDefault();
	dropdown.classList.toggle("expanded");
};
trigger.addEventListener("click", toggle);
Popper.createPopper(trigger, dropdown, {
	placement: 'bottom',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 8],
      },
    },
  ],
});