You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The MDC Menu Surface component is a reusable surface that appears above the content of the
page and can be positioned adjacent to an element. Menu Surfaces require JavaScript to properly position
themselves when opening.
The menu surface can use absolute positioning when being displayed. This requires that the element containing the
menu has the position: relative style.
<divclass="mdc-menu-surface">
...
</div>
// ...menuSurface.setAbsolutePosition(100,100);
Style Customization
CSS Classes
CSS Class
Description
mdc-menu-surface
Mandatory.
mdc-menu-surface--animating-open
Indicates the menu surface is currently animating open. This class is removed once the animation completes.
mdc-menu-surface--open
Indicates the menu surface is currently open, or is currently animating open.
mdc-menu-surface--animating-closed
Indicates the menu surface is currently animating closed. This class is removed once the animation completes.
mdc-menu-surface--anchor
Used to indicate which element the menu should be anchored to.
mdc-menu-surface--fixed
Used to indicate that the menu is using fixed positioning.
Sass Mixins
Mixin
Description
mdc-menu-surface-ink-color($color)
Sets the color property of the mdc-menu-surface.
mdc-menu-surface-fill-color($color)
Sets the background-color property of the mdc-menu-surface.
Proxies to the foundation's isOpen/(open, close) methods.
quickOpen
boolean
Proxies to the foundation's setQuickOpen() method.
anchorElement
Element
Gets or sets the element that the surface is anchored to, or null if the surface is not anchored. Defaults to the root element's parent mdc-menu-surface--anchor element if present.
Method Signature
Description
setAnchorCorner(Corner) => void
Proxies to the foundation's setAnchorCorner(Corner) method.
setAnchorMargin(Partial<MDCMenuDistance>) => void
Proxies to the foundation's setAnchorMargin(Partial<MDCMenuDistance>) method.
setFixedPosition(isFixed: boolean) => void
Adds the mdc-menu-surface--fixed class to the mdc-menu-surface element. Proxies to the foundation's setIsHoisted() and setFixedPosition() methods.
setAbsolutePosition(x: number, y: number) => void
Proxies to the foundation's setAbsolutePosition(x, y) method. Used to set the absolute x/y position of the menu on the page. Should only be used when the menu is hoisted to the body.
If you are using a JavaScript framework, such as React or Angular, you can create a Menu Surface for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
MDCMenuSurfaceAdapter
Method Signature
Description
addClass(className: string) => void
Adds a class to the root element.
removeClass(className: string) => void
Removes a class from the root element.
hasClass(className: string) => boolean
Returns a boolean indicating whether the root element has a given class.
hasAnchor: () => boolean
Returns whether the menu surface has an anchor for positioning.
notifyClose() => void
Dispatches an event notifying listeners that the menu surface has been closed.
notifyOpen() => void
Dispatches an event notifying listeners that the menu surface has been opened.
isElementInContainer(el: Element) => boolean
Returns true if the el Element is inside the mdc-menu-surface container.
isRtl() => boolean
Returns boolean indicating whether the current environment is RTL.
setTransformOrigin(value: string) => void
Sets the transform origin for the menu surface element.
isFocused() => boolean
Returns a boolean value indicating whether the root element of the menu surface is focused.
saveFocus() => void
Stores the currently focused element on the document, for restoring with restoreFocus.
restoreFocus() => void
Restores the previously saved focus state, by making the previously focused element the active focus again.
getInnerDimensions() => MDCMenuDimensions
Returns an object with the items container width and height.
getAnchorDimensions() => ClientRect | null
Returns an object with the dimensions and position of the anchor.
getBodyDimensions() => MDCMenuDimensions
Returns an object with width and height of the body, in pixels.
getWindowDimensions() => MDCMenuDimensions
Returns an object with width and height of the viewport, in pixels.
getWindowScroll() => MDCMenuPoint
Returns an object with the amount the body has been scrolled on the x and y axis.