File Menu

File Menu (3 dots)

3 dot menu that appears in the right corner of customer art files.

Examples

File menu open
Code
					
<button type="button" id="" class="fileMenuBtn posAbsolute btnToHyp noLine padding10" aria-expanded="false">
	<svg class="show" height="20px" width="20px" focusable="false" role="img" aria-label=""><title></title><use xlink:href="#svgIcon-threeDotMenu"></use></svg>
</button>
<div class="fileMenu posAbsolute">
	<ul class="itemMenuLinks reset resetList textLeft padding5 borderMdGray bkgdWhite dropdownShadow">
		<li>
			<button type="button" id="" aria-pressed="false" class="textLeft noLine btnToHyp text16 darkestLink">Edit Name</button>
		</li>
		<li class="paddingTop5">
			<button type="button" id="" aria-pressed="false" class="textLeft noLine btnToHyp text16 darkestLink">Delete</button>
		</li>
	</ul>
	<svg class="menuTriangle posAbsolute textWhite rotate90" height="15px" width="15px" aria-hidden="true"> <use xlink:href="#svgIcon-arrowSolid"></use> </svg>
</div>
Notes

Parent element must have class posRelative on it.

If there's only 1 button in the menu, replace ul element with div and remove li elements.

Resources

Sass File(s)/sass/components/_filemenu.scss
JS File(s)None
JS FunctionsNone
Locale FileNone

Accessibility

Update svg aria-label and title.

To Top