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>