Menus
Menus are used to group interactions for an element. It's typically displayed in a popover to offer contextual interactions, but it can also displayed inside a box or card.
Usage
With a popover
In a box
Sizes
Medium (default)
Small
Extra small
States
Focus
Menu items should turn white on primary active when they have focus. Donc forget to add the tabindex attribute to enable focus.
Active state
You can force an active state by adding the is-active class to a menu item. This is useful when using keyboard (⬆️ / ⬇️) navigation.