Menu API

The UI API library enables easy creation and customization of Finsemble-themed menus on the toolbar. The <Menu> component serves as the top-level component in such a menu. Other components like <MenuItem> and <MenuToggle> use the context provided by <Menu>.

Props

Prop	Type	Required	Default value	Description
className	string	No	`undefined`	Set CSS styles for the menu. These classes will be appended to the tag of the drop down menu's window.
closeHotkey	string[]	No	`["escape"]`	A key combination to close the menu. Defaults to the escape key. Set to `null` to override that default.
height	number	No	`undefined`	Set fixed height for the menu
id	string	No	Random string	A unique ID for the menu. Helpful for debugging.
maxHeight	number	No	`undefined`	Set maximum height for the menu
openHotkey	number	No	`undefined`	A key combination to open the menu
title	string	Yes		The title of the menu button. (This will be placed in the menu's internal component.)
width	number	No	180	Override menu width

Menus default to 180 pixels wide and will automatically resize vertically to contain their content. A menu will never extend past the edge of the monitor screen. If the content is too tall then a scrollbar will appear in the menu.

You may override the default width with the width attribute. You may also set a fixed height with the height attribute.

Scrollbars can be eliminated by including the class menu-no-scroll in <MenuShell>. This is can be useful if the contents of your menu already scroll. One such example is the <Search> component.

The openHotkey and closeHotkey properties make use of Finsemble's global hotkeys API. Key combinations are defined as an array of keys. Common keys are "ctrl","shift","alt","esc" as well as any letter or number. See Finsemble's Hotkey Client API for more information on key combinations.

The children (the contents) of <Menu> will make up the contents of the drop down menu. This can include any valid JSX markup.

Note: Menus make use of React Portals and are set to an initial url of "about:blank". Relative paths inside <Menu> content will not be interpreted correctly. Be sure to use url-loader plugin to ensure that assets such as fonts, images, and svgs are compiled into <style> tags that can run within the menu. If you're having trouble with fonts or images not displaying, check insides the <style> tags from within the Chrome browser to see whether they are referencing URL's rather than base64 encoded URI's.

Usage

An example of a menu in the seed project is the File Menu

export const FileMenu = () => (
	<Menu
		id="fileMenu"
		title={<img className="finsemble-toolbar-brand-logo" src="../../../assets/img/Finsemble_Taskbar_Icon.png" />}
	>
		{/*Buttons go here...*/}
	</Menu>
);