Drop downs

Storage drop down

Drop down code

If the drop down has to be opened, just set aria-expanded to true on the button and remove hidden attribute on .dropDown-content.

<div class="dropDown pm-button-blue inbl">
  <button class="increase-surface-click" aria-expanded="false/true" type="button">
    Drop Down button
  </button>
  <div class="dropDown-content" hidden>
    Content of the drop down
  </div>
</div>

Note: For React projects, this component does not use exact same styles as Design System website, it uses dedicated styles (for positionning/layout issues/etc.).

Drop down code (pagination)

For pagination, you may use nav tag.
For “icons only” buttons, please add pm-button--for-icon modifier, and do not forget to add text using sr-only class.
For the SVG caret icon, please add expand-caret class on it, this will manage the rotation when expanded/not expanded.
Expand can contains links or buttons.
By default, the height of the drop down is not limited.

Looooooong pagination

If you need to limit the height of the drop down, you may put dropDown-contentInner class on the first child of dropDown-content:

<div class="unstyled dropDown-content dropDown-content--narrow" hidden>
    <ul class="unstyled p1 aligncenter dropDown-contentInner">

This will add a max-height on the content and add also shadows to show there is so more content (same as for modals).

<nav class="pm-group-buttons">

  <button class="pm-button pm-group-button pm-button--for-icon" title="Previous page">
    <svg viewBox="0 0 16 16" class="icon-16p fill-global-grey mtauto mbauto" role="img" aria-hidden="true" focusable="false">
      <use xlink:href="#shape-arrow-left"></use>
    </svg>
    <span class="sr-only">Previous page</span>
  </button>

  <div class="dropDown pm-button pm-group-button pm-button--for-icon">

    <button class="increase-surface-click" aria-expanded="false/true" type="button" title="Open pagination">
      <span class="mauto">
        1
        <svg viewBox="0 0 16 16" class="icon-12p expand-caret" role="img" aria-hidden="true" focusable="false">
          <use xlink:href="#shape-caret"></use>
        </svg>
      </span>
    </button>
    <div class="unstyled dropDown-content dropDown-content--narrow" hidden>
      <ul class="unstyled mt0-5 mb0-5 aligncenter">
        <li class="dropDown-item">
          <button class="w100 pt0-5 pb0-5 color-currentColor" aria-current="page">1</button>
        </li>
        <li class="dropDown-item">
          <button class="w100 pt0-5 pb0-5 color-currentColor">2</button>
        </li>
        <li class="dropDown-item">
          <button class="w100 pt0-5 pb0-5 color-currentColor">3</button>
        </li>
        <li class="dropDown-item">
          <a class="w100 pt0-5 pb0-5 color-currentColor inbl nodecoration">link</a>
        </li>
      </ul>
    </div>
  </div>

  <button class="pm-button pm-group-button pm-button--for-icon" title="Next page">
    <svg viewBox="0 0 16 16" class="icon-16p fill-global-grey mtauto mbauto" role="img" aria-hidden="true" focusable="false">
      <use xlink:href="#shape-arrow-right"></use>
    </svg>
    <span class="sr-only">Next page</span>
  </button>
</nav>

Other example (edit button group)

If the drop down does not need to be wide, you may use dropDown-content--narrow modifier in order to make it… narrower (!).
Even if it is designed for “icons only” buttons, you may add pm-button--for-icon modifier in order to reduce the padding in these buttons.
When there is text + caret icon in the button, please add a flex class on the button, and wrap text + caret icon in a span class="mauto" (fixes vertical centering issues, CSS is great).

Color may also be applied to buttons groups, the caret icon will take automatically the same color thanks to fill: currentColor:

<div class="pm-group-buttons">
  <button class="pm-button pm-group-button">
    Edit
  </button>
  <div class="dropDown pm-button pm-group-button pm-button--for-icon">
    <button class="increase-surface-click flex js-dropDown-button" aria-expanded="false" type="button" title="Open pagination">
      <span class="mauto">
        Other
        <svg viewBox="0 0 16 16" class="icon-12p expand-caret" role="img" aria-hidden="true" focusable="false">
          <use xlink:href="#shape-caret"></use>
        </svg>
      </span>
    </button>
    <div class="js-dropDown-content unstyled dropDown-content dropDown-content--narrow" hidden>
      <ul class="unstyled mt0-5 mb0-5 ml1 mr1 aligncenter">
        <li class="dropDown-item"><button class="w100 pt0-5 pb0-5 color-currentColor">Blah</button></li>
        …
      </ul>
    </div>
  </div>
</div>

Drop down wide (advanced search)

<div class="dropDown inbl">
  <button class="pm-button-blue" aria-expanded="false/true" type="button">
    Drop down wide
  </button>
  <div class="dropDown-content dropDown-content--wide" hidden>
    <ul class="unstyled mt0-5 mb0-5 ml1 mr1">
      <li class="dropDown-item">
        <button class="w100 pt0-5 pb0-5 color-currentColor alignleft">A first action</button>
      </li>
      <li class="dropDown-item">
        <button class="w100 pt0-5 pb0-5 color-currentColor alignleft">Another action</button>
      </li>
      <li class="dropDown-item">
        <button class="w100 pt0-5 pb0-5 color-currentColor alignleft">A third action</button>
      </li>
    </ul>
  </div>
</div>

Drop down code (simple buttons)

<div class="dropDown inbl">
  <button class="pm-button-blue" aria-expanded="false/true" type="button">
    Drop Down button
  </button>
  <div class="dropDown-content" hidden>
    <ul class="unstyled mt0-5 mb0-5 ml1 mr1">
      <li class="dropDown-item">
        <button class="w100 pt0-5 pb0-5 color-currentColor alignleft">A first action</button>
      </li>
      <li class="dropDown-item">
        <button class="w100 pt0-5 pb0-5 color-currentColor alignleft">Another action</button>
      </li>
      <li class="dropDown-item">
        <button class="w100 pt0-5 pb0-5 color-currentColor alignleft">A third action</button>
      </li>
    </ul>
  </div>
</div>