Code examples
<Menu> <MenuTrigger> Menu </MenuTrigger> <MenuContent> <MenuItem value="1"> Item 1 </MenuItem> <MenuItem value="2"> Item 2 </MenuItem> <MenuItem value="3"> Item 3 </MenuItem> <MenuItem value="4"> Item 4 </MenuItem> </MenuContent> </Menu>
Guidelines
The Menu component provides an accessible, structured way to present contextual actions or options to users without overwhelming the interface. It is ideal when you want to group related commands behind a single trigger.
In addition to simple action items, the menu can also present more complex option groups like single‑select radio lists, or multi‑select checkbox lists. This makes it suitable for settings menus, or sorting/filtering controls.
Secondary actions
Menues should only contain secondary actions that are not critical and necessary to be visible for the user at all times.
Grouping of items
Checkbox-items and radio-items should always be grouped and wrapped in a MenuItemGroup with a label describes their purpose/context. If the menu only consists of checkbox-items or radio-items, a label is not necessary if the menu trigger has a descriptive name.
Submenues
Submenues can be useful to group actions that are related, but it adds complexity to the menu.
Avoid using more than 2 levels of submenues.
Code
<Menu />
import { Menu } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Children should contain CardSelectTrigger and CardSelectContent | |
open | boolean | ||
onOpenChange | (details: OpenChangeDetails) => void | ||
positioning | PositioningOptions | Decides the placement of the menu. Example: {{ placement: "right-start" }} |
<MenuTrigger />
import { MenuTrigger } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Content of triggerButton | |
variant | "core" | "ghost" | "floating" | Defaults to "core" | |
icon | React.ReactNode | Icon to be shown on the left side of trigger |
<MenuContent />
import { MenuContent } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Content of the card | |
maxHeight | string | Set this to create a scrollable menu. |
<MenuItem />
import { MenuItem } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | ||
itemCommand | string | Display a command on the right side of the item | |
closeOnSelect | boolean | Whether the menu should be closed when the option is selected. | |
disabled | boolean | ||
leftIcon | React.ReactNode | ||
rightIcon | React.ReactNode |
<MenuTriggerItem />
import { MenuTriggerItem } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | ||
leftIcon | React.ReactNode | ||
rightIcon | React.ReactNode |
<MenuRadioItemGroup />
import { MenuRadioItemGroup } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | children should be MenuRadioItem's |
<MenuRadioItem />
import { MenuRadioItem } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | ||
closeOnSelect | boolean | Whether the menu should be closed when the option is selected. |
<MenuItemGroup />
import { MenuItemGroup } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | ||
label | string |
<MenuCheckboxItem />
import { MenuCheckboxItem } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | ||
checked | boolean | ||
onCheckedChange | function | (checked: boolean) => void | |
closeOnSelect | boolean | Default false. Whether the menu should be closed when the option is selected. |
<MenuSeparator />
import { MenuSeparator } from "@vygruppen/spor-react";