Menu

• Your Profile

  ⌘ + P
• Account Settings

  ⌘ + S
• Support
  This is a string of text that will help the user decide which action to take.
• Refer a Friend
• Sign Out

import { Menu } from '@tulsa/core';

<Menu>
    <Menu.Item
        leadingVisual={<BiUser color='inherit' fontSize={"1.1em"} />}
        trailingVisual={"⌘ + P"}
    >
        Your Profile
    </Menu.Item>
    <Menu.Item
        leadingVisual={<BiAlarm color='inherit' fontSize={"1.1em"} />}
        trailingVisual={"⌘ + S"}
    >
        Account Settings
    </Menu.Item>
    <Menu.Divider isRowDivider />
    <Menu.Item
        description='This is a string of text that will help the user decide which action to take.'
        leadingVisual={<BiQuestionMark color='inherit' fontSize={"1.1em"} />}
        trailingVisual={<BiChevronRight color='inherit' fontSize={"1.2em"} />}
    >
        Support
    </Menu.Item>
    <Menu.Item variant='dangerous' selected trailingVisual={<BiChevronRight color='inherit' fontSize={"1.2em"} />}>Refer a Friend</Menu.Item>
    <Menu.Divider />
    <Menu.Item variant='dangerous'>Sign Out</Menu.Item>
</Menu>

Props

HTMLProps<"ul">

Menu.Item

Props

Name	Type	Description	Default
variant	'default' | 'dangerous' | 'success'	Controls the look & feel of the item	"default"
disabled	boolean	Sets whether or not the button is displayed as disabled or not
selected	boolean	Sets whether or not the button is displayed as selected or not
onSelect	(): any	Action that will triggered on click
leadingVisual	string | React.ReactElement	An element that will appear before the items's content
leadingVisualProps	HTMLProps<"span">	Props that will be applied to the root component of the leading visual
trailingVisual	string | React.ReactElement	An element that will appear after the items's content
trailingVisualProps	HTMLProps<"span">	Props that will be applied to the root component of the trailing visual
description	string	Details of the item that will appear below the main content
as	T	Controls the root element that is used by the item. Can be an HTML element string or a React component	"li"

Native props are forwarded to the root component.

Menu.Divider

Props

Name	Type	Description	Default
isRowDivider	boolean	If true, alters the margins of the divider for rows, as opposed to groups

Native props are forwarded to the root component.