Menu

The <Menu /> component is an accessibility-focused dropdown menu.

Built on top of the Reach UI Menu Button.

When To Use:

When you need to trigger actions from a dropdown (such as when clicking in the menu of a desktop application).

⚠️

Do not use this if you need to store a value. Use a <select /> component instead.

import {
MenuContainer,
MenuButton,
MenuList,
MenuItem,
MenuLink,
MenuDivider,
} from 'minerva-ui';

With Divider

With Custom Colored Selected Menu Item

Positioned To Right

Change alignment for MenuList relative to parent

Props

Most props are extended from Reach UI's <MenuButton /> component

<Menu />

NameTypeIs RequiredDefaultDescription
childrennodeoptionalnone

<MenuButton />

NameTypeIs RequiredDefaultDescription
childrennodeoptionalnone

<MenuList />

NameTypeIs RequiredDefaultDescription
childrennodeoptionalnone
menuPositionleft or rightoptionalleftChange alignment for MenuList relative to parent

<MenuItem />

NameTypeIs RequiredDefaultDescription
onSelectfunctionrequirednoneCallback that fires event MenuLink is selected
childrennodeoptionalnone

<MenuLink />

Similar to <MenuItem />, but used for links (renders an <a /> tag)

NameTypeIs RequiredDefaultDescription
onSelectfunctionrequirednoneCallback that fires event MenuLink is selected
childrennodeoptionalnone