Drop downs
With
.dropDown--leftArrow
modifier class.
Width of 200px, centered on
.dropDown
container.
With
.dropDown--rightArrow
modifier class, already opened.
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 usingsr-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 aspan 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>