2.26 #Components.overflow-menu Overflow Menu
Toggle example guides Toggle HTML markup
Browser support: IE11+, Safari6+, Firefox30+, Chrome30+
Default styling
- username@usabilla.com
- Plain item
.sb-overflow-menu--open
Open overflow menu
- username@usabilla.com
- Plain item
Markup
<ul class="sb-overflow-menu [modifier class]" tabindex="0" role="menu" data-kss-animation-cb="sb-overflow-menu--open">
<li class="sb-overflow-menu__header">
<span class="sb-overflow-menu__label">username@usabilla.com</span>
</li>
<li>
<a href="#link" class="sb-overflow-menu__item" role="menuitem">
<span class="sb-overflow-menu__label">Plain item</span>
</a>
</li>
<li>
<button class="sb-overflow-menu__item" role="menuitem">
<svg class="sb-icon sb-margin-right-xs" viewBox="0 0 16 16">
<path d="M11.893 9.827l-3.636 3.484a.37.37 0 0 1-.257.102.37.37 0 0 1-.257-.102L4.107 9.827A.339.339 0 0 1 4 9.581c0-.193.163-.349.364-.349.1 0 .19.04.257.103l3.015 2.889V.348C7.636.156 7.8 0 8 0c.201 0 .364.156.364.348v11.876l3.015-2.89a.37.37 0 0 1 .257-.102c.201 0 .364.156.364.349a.34.34 0 0 1-.107.246zM16 15.665a.343.343 0 0 1-.35.335H.35a.343.343 0 0 1-.35-.335c0-.186.157-.336.35-.336h15.3c.193 0 .35.15.35.336z"/>
</svg>
<span class="sb-overflow-menu__label">Download</span>
</button>
</li>
<li>
<button class="sb-overflow-menu__item" role="menuitem">
<svg class="sb-icon sb-margin-right-xs sb-icon--link" viewBox="0 0 13 16">
<path d="M7.21582935 3.881V0L13 6l-5.78417065 6V8.0345C.4864288 7.8705.77515533 12.7805 2.48823387 16-1.73999488 11.259-.8424844 3.663 7.21582935 3.881"/>
</svg>
<span class="sb-overflow-menu__label">Forward to a friend</span>
</button>
</li>
<li>
<button class="sb-overflow-menu__item" role="menuitem">
<svg class="sb-icon sb-margin-right-xs" viewBox="0 0 16 16">
<path d="M4.50044648,13.7056111 L8,11.5680972 L11.4995535,13.7056111 L10.5480786,9.71680978 L13.6623965,7.04906473 L9.57479916,6.7213638 L8,2.93509282 L6.42520085,6.7213638 L2.33760346,7.04906473 L5.45192146,9.71680977 L4.50044648,13.7056111 Z M8,12.6096808 L3.13994104,15.5781862 L4.4613166,10.0386768 L0.13625942,6.33380469 L5.81297339,5.878705 L8,0.620462738 L10.1870267,5.878705 L15.8637405,6.33380469 L11.5386834,10.0386768 L12.8600589,15.5781862 L8,12.6096808 Z"></path>
</svg>
<span class="sb-overflow-menu__label">Star</span>
</button>
</li>
<li>
<button class="sb-overflow-menu__item sb-overflow-menu__item--danger" role="menuitem">
<svg class="sb-icon sb-margin-right-xs" viewBox="0 0 16 16">
<path d="M6.07369,13.800506 L5.5067,4.501887 C5.49899,4.287778 5.32027,4.12099 5.10764,4.12836 C4.89502,4.136506 4.72901,4.316481 4.73671,4.53059 L5.30409,13.829209 C5.31179,14.043318 5.49052,14.210493 5.70314,14.202736 C5.91576,14.19459 6.08139,14.015003 6.07369,13.800506 Z M12.23704,14.507579 C12.18504,14.883573 11.89191,15.220363 11.46667,15.220363 L4.53333,15.220363 C4.1077,15.220363 3.82151,14.887493 3.76296,14.507579 L2.99259,2.909091 L13.00741,2.909091 L12.23704,14.507579 Z M6.07407,2.327273 L6.07407,0.776145 L9.92593,0.776145 L9.92593,2.327273 L6.07407,2.327273 Z M10.6963,2.181818 L10.6963,0.727636 C10.6963,0.325818 10.35117,0 9.92593,0 L6.07407,0 C5.64844,0 5.3037,0.325818 5.3037,0.727636 L5.3037,2.181818 L0.38519,2.181818 C0.17256,2.181818 0,2.344727 0,2.545818 C0,2.746545 0.17256,2.909091 0.38519,2.909091 L2.22222,2.909091 L2.99259,14.545455 C3.11662,15.341455 3.68246,16 4.53333,16 L11.46667,16 C12.31754,16 12.86258,15.333455 13.00741,14.545455 L13.77778,2.909091 L15.61481,2.909091 C15.82744,2.909091 16,2.746545 16,2.545818 C16,2.344727 15.82744,2.181818 15.61481,2.181818 L10.6963,2.181818 Z M10.69707,13.829208 L11.25559,4.53059 C11.26329,4.316481 11.09727,4.136505 10.88465,4.12836 C10.67203,4.12099 10.4933,4.288166 10.48599,4.502275 L9.92708,13.801281 C9.91938,14.01539 10.08578,14.194978 10.29801,14.202735 C10.51102,14.210881 10.68936,14.043317 10.69707,13.829208 Z M8.38519,13.814157 L8.38519,4.505066 C8.38519,4.290569 8.21262,4.117188 8,4.117188 C7.78738,4.117188 7.61481,4.290569 7.61481,4.505066 L7.61481,13.814157 C7.61481,14.028654 7.78738,14.202036 8,14.202036 C8.21262,14.202036 8.38519,14.028654 8.38519,13.814157 Z"></path>
</svg>
<span class="sb-overflow-menu__label">Delete</span>
</button>
</li>
</ul>
Source: components/_overflow-menu.scss, line 1