You can pass a outside-click callback via onOutsideClick property.
You can also pass a outside-click detector callback (that returns a boolean) via outsideClickDetector to overwrite the default detection function. This is super useful in the situations you are having complex interactions and you want to fully control the behaviour of your menus.

Menus with Grouped Items

Text Overflow

There is a flexbox bug that prevents text-overflow: ellipsis from working in a flexbox layout. You can use the following workaround for this issue:

API

Learn more about the properties and the customization points.

Usage

import Menu, { MenuItem, MenuItemGroup } from "@sonnat/ui/Menu";

//or
import { Menu, MenuItem, MenuItemGroup } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Menu Properties

Menu Properties
Name	Type	Default	Description
children	node	-	The content of the menu.
anchorNodeReference required	React.RefObject<HTMLElement>	-	An HTML element reference. It's used to set the position of the menu.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
alignment	"middle" \| "start" \| "end"	"start"	The menu positioning alignment.
minWidth	"anchorWidth" \| number	-	Sets the minimum width of the menu.
maxWidth	"anchorWidth" \| number	-	Sets the maximum width of the menu.
searchPlaceholder	string	-	The `placeholder` property of the search field.
searchEmptyStatementText	string	-	The empty statement text when search results are empty.
disabled	boolean	false	If `true`, the menu will be searchable.
searchable	boolean	false	If `true`, the menu will be searchable.
preventPageScrolling	boolean	false	If `true`, the menu will block the page's scrolling.
dense	boolean	false	If `true`, the menu will appear denser.
open	boolean	false	If `true`, the menu will be open.
onOpen	function	-	The callback fires when the menu has opened. Signature: `function() => void`
onClose	function	-	The callback fires when the menu has closed. Signature: `function() => void`
onEscapeKeyDown	function	-	The callback fires when the `Escape` key is released. Signature: `function(event: KeyboardEvent) => void`
onOutsideClick	function	-	The callback fires when user has clicked outside of the menu. Signature: `function(event: MouseEvent) => void`
outsideClickDetector	function	-	The callback fires when the user has clicked, and determines whether the click occured outside of the menu or not. It only fires when the menu is open! Signature: `function(event: React.MouseEvent) => boolean`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

Menu/Item Properties

Menu/Item Properties
Name	Type	Default	Description
children	node	-	The content of the menu item.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
disabled	boolean	false	If `true`, the item will be hidden.
onClick	function	-	The callback fires when the item has been clicked. Signature: `function(event: React.MouseEvent) => void`
onFocus	function	-	The callback fires when the item has received focus. Signature: `function(event: React.FocusEvent) => void`
onBlur	function	-	The callback fires when the item has lost focus. Signature: `function(event: React.FocusEvent) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

Menu/ItemGroup Properties

Menu/ItemGroup Properties
Name	Type	Default	Description
children	node	-	The content of the group.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
titleClassName	string	-	Append to the classNames applied to the title so you can override or extend the styles.
title	string	-	The title of the group.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

Menu

Simple Menu