Menu

Menu is a crucial part of any application that allows users quickly achieve their goals. It must be simple and easy to use and that is why we have a dedicated component that you can embed anywhere in your app.

Example

Below is an example with circle layout.

import "spatial-design-system/primitives/ar-menu.js";

<a-ar-menu
    position="0 1.5 -3"
    visible="true"
    primary="#018A6C"
    items="[
            {'color':'white','icon':'/content-save','title':'Save','textColor':'black'},
            {'color':'white','icon':'/close-circle','title':'Quit','textColor':'black'},
            {'color':'white','icon':'/settings','title':'Settings','textColor':'black'},
            {'color':'white','icon':'/file-plus','title':'New file','textColor':'black'}
        ]"
    variant="filled"
    layout="circle"
></a-ar-menu>

TIP

You can use stringifyForHTML from spatial-design-system/utils/utils.js to convert items to JSON and put them in the items attribute instead of hardcoding. For example, in Vue.js:

<a-ar-menu
    position="0 1.5 -3"
    visible="true"
    primary="lightblue"
    :items="stringifyForHTML(items)"
    variant="filled"
    layout="circle"
></a-ar-menu>

Props

Property	Type	Default	Description
visible	boolean	true	Shows or hides the menu.
size	enum (small, medium, large)	medium	Influences the compactness of the menu (paddings, font sizes, etc.)
position	number[]	0 0 0	Sets menu position.
primary	string (blue, #fff)	#0091E3	Alters menu color (text, background, icon background).
items	string (JSON)	""	Decorates menu using title, color or icon. Format: { icon: "home.svg", title: "", color: "red" }. Icon is a URL or asset ID with hashtag. Default color is white.
variant	enum (filled, transparent)	filled	Alters overall menu look.
logoicon	image url or asset ID (string)	""	Sets a menu prepend icon based on the image's url or asset ID with hashtag.
layout	string (circle, grid)	grid	Sets menu layout.
highlighted	string(red, #fff)	#C1080C	Sets color of elements when clicked on
backbutton	boolean	false	Displays back button in the middle of the menu