Drop-down menu
ready

Introduction

A drop-down menu allows for easy navigation to multiple links without cluttering you header bar. Click the hamburger menu icon to open the menu. Click the hamburger menu icon again or anywhere on the greyed out overlay to close the menu.

Insert this code at the top of your page in order to add this header with a drop-down menu, or just add the code for the drop-down menu itself as an item into your existing header.

Examples

Basic implementation

<div class="dropdown__header">
      <div class="row--align-justify row--align-middle">
        <svg class="pf-logo">
          <use xlink:href="/v2.1/assets/images/icons/logos.svg#logo" />
        </svg>
        <div type="button" class="hamburger hamburger--squeeze" data-dropdown-button>
          <span class="hamburger__box">
            <span class="hamburger__inner"></span>
          </span>
        </div>
      </div>
    </div>
    <div class='dropdown__wrapper'>
      <nav class="dropdown__content" data-dropdown-content>
        <a href='#' class='nav__link nav__link--chrome'>My Profile</a>
        <a href='#' class='nav__link nav__link--chrome'>Settings</a>
        <hr/>
        <a href='#' class='nav__link nav__link--chrome'>Sign Out</a>
      </nav>
    </div>
    
    
    <div class="dropdown__overlay" data-dropdown-overlay></div>

Dependencies

  • src/styles/components/blocks/_dropdown-menu.scss
  • src/scripts/modules/pfDropdownMenu.js

Usage

Class/JavaScript Hook Description Required?
.dropdown__header Styles the header bar and keeps it above the greyed-out overlay while the menu is open. Place this class on the outermost div of your header. Required.
.dropdown__wrapper This wraps the drop-down content in order to position the drop-down correctly. Required.
.dropdown__content Styles the content of the drop-down menu. Required.
.dropdown__overlay Styles the greyed-out overlay which appears when the menu is open. Required.
[data-dropdown-button] Acts as a trigger for the javascript method which opens the menu. Required.
[data-dropdown-content] A hook for the javascript method to identify this element and change it's styling. This results in the menu content opening. Required.
[data-dropdown-overlay] A hook for the javascript method to identify this element and change it's styling. This results in the overlay becoming visible when the menu is open. Required.