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 <body> 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 <MenuToggle> 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.
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>
);