Skip to content
7 Seventh UI CSS

Components

Bitbucket Figma

Menu

Plain CSS implementation of the Figma Menu section, node 913:2086.

Use role="menu" only for application menus that implement the expected keyboard behavior. Static navigation can use regular lists and links.

<div class="sui-menu"> <div class="sui-menu__list" role="menu" aria-label="Actions"> <button class="sui-menu__item" type="button" role="menuitem"> <span class="sui-menu__leading"><span class="sui-icon sui-icon--file-system-folder-outline"></span></span> <span class="sui-menu__content"><span class="sui-menu__label">Menu item</span></span> <span class="sui-menu__trailing"><span class="sui-icon sui-icon--arrows-angle-right"></span></span> </button> </div> </div>