Menu - rafty/ui Docs

Displays a menu to the user—such as a set of actions or functions—triggered by a button. This component is made on top of Radix UIs Dropdown Menu Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible. If you need to apply your own styling you can use the isBarebone (to remove styling from entire component and its subcomponents) or isUnstyled (to remove styling from a particular subcomponent).

Anatomy

Import all parts and piece them together.

import {
  Menu,
  MenuTrigger,
  MenuItem,
  MenuCheckboxItem,
  MenuContent,
  MenuSeparator,
  MenuRadioGroup,
  MenuLabel,
  MenuRadioItem,
} from "@rafty/ui";

<Menu>
  <MenuTrigger />
  <MenuContent>
    <MenuItem />
    <MenuSeparator />
    <MenuCheckboxItem />
    <MenuLabel />
    <MenuRadioGroup>
      <MenuRadioItem />
    </MenuRadioGroup>
  </MenuContent>
</Menu>;

Usage

<Menu>
  <MenuTrigger rightIcon={<ChevronDownIcon className="stroke-2" height={16} width={16}/>}>
    Actions
  </MenuTrigger>
  <MenuContent>
    <MenuItem>
      New Tab
    </MenuItem>
    <MenuItem>
      New Window
    </MenuItem>
    <MenuItem disabled>
      New Private Window{' '}
    </MenuItem>
  </MenuContent>
</Menu>

Size

There are 3 size options in Menu: sm, md (default) & lg.

<Menu size="sm">
  <MenuTrigger rightIcon={<ChevronDownIcon className="stroke-2" height={16} width={16}/>}>
    Actions
  </MenuTrigger>
  <MenuContent>
    <MenuItem>
      New Tab
    </MenuItem>
    <MenuItem>
      New Window
    </MenuItem>
    <MenuItem disabled>
      New Private Window{' '}
    </MenuItem>
    <MenuSeparator />
    <MenuCheckboxItem checked>
      Show Bookmarks{' '}
      <div className="RightSlot">
        ⌘+B
      </div>
    </MenuCheckboxItem>
    <MenuCheckboxItem>
      Show Full URLs
    </MenuCheckboxItem>
    <MenuSeparator />
    <MenuLabel>
      People
    </MenuLabel>
    <MenuRadioGroup value="1">
      <MenuRadioItem value="1">
        Pedro Duarte
      </MenuRadioItem>
      <MenuRadioItem value="2">
        Colm Tuite
      </MenuRadioItem>
    </MenuRadioGroup>
  </MenuContent>
</Menu>

<Menu>
  <MenuTrigger rightIcon={<ChevronDownIcon className="stroke-2" height={16} width={16}/>}>
    Actions
  </MenuTrigger>
  <MenuContent>
    <MenuSub>
      <MenuSubTrigger
        style={{
          justifyContent: 'space-between'
        }}
      >
        More Tools
      </MenuSubTrigger>
      <MenuSubContent>
        <MenuItem className="justify-between">
          Save Page As…{' '}
          <div className="RightSlot">
            ⌘+S
          </div>
        </MenuItem>
        <MenuItem>
          Create Shortcut…
        </MenuItem>
        <MenuItem>
          Name Window…
        </MenuItem>
        <MenuSeparator />
        <MenuItem>
          Developer Tools
        </MenuItem>
      </MenuSubContent>
    </MenuSub>
  </MenuContent>
</Menu>

<Menu>
  <MenuTrigger rightIcon={<ChevronDownIcon className="stroke-2" height={16} width={16}/>}>
    All Feature
  </MenuTrigger>
  <MenuContent>
    <MenuCheckboxItem checked>
      Show Bookmarks{' '}
      <div className="RightSlot">
        ⌘+B
      </div>
    </MenuCheckboxItem>
    <MenuCheckboxItem>
      Show Full URLs
    </MenuCheckboxItem>
  </MenuContent>
</Menu>

<Menu>
  <MenuTrigger rightIcon={<ChevronDownIcon className="stroke-2" height={16} width={16}/>}>
    Actions
  </MenuTrigger>
  <MenuContent>
    <MenuLabel>
      People
    </MenuLabel>
    <MenuRadioGroup value="1">
      <MenuRadioItem value="1">
        Pedro Duarte
      </MenuRadioItem>
      <MenuRadioItem value="2">
        Colm Tuite
      </MenuRadioItem>
    </MenuRadioGroup>
  </MenuContent>
</Menu>

Barebone

Pass isBarebone prop to remove all style in Menu.

<Menu isBarebone>
  <MenuTrigger
    className="bg-secondary-200 dark:bg-secondary-600 dark:bg-secondar-500 hover:bg-primary-dark dark:hover:bg-secondary-dark  flex items-center space-x-2 rounded-md border-none px-3 py-2 text-black dark:text-white"
    rightIcon={<ChevronDownIcon className="stroke-2" height={16} width={16}/>}
    size="sm"
  >
    Actions
  </MenuTrigger>
  <MenuContent
    className="bg-secondary-100 dark:bg-secondary-800  dark:text-primary space-y-1 rounded-md p-1 text-black  shadow-md dark:text-white "
    sideOffset={5}
  >
    <MenuItem className="hover:bg-primary-dark hover:bg-secondary-300 dark:hover:bg-secondary-700 rounded-md p-1 text-sm">
      New Tab
    </MenuItem>
    <MenuItem className="hover:bg-primary-dark hover:bg-secondary-300 dark:hover:bg-secondary-700  rounded-md p-1 text-sm ">
      New Window
    </MenuItem>
    <MenuItem className="text-primary dark:text-secondary-400 cursor-context-menu rounded-md p-1 text-sm ">
      New Private Window
    </MenuItem>
  </MenuContent>
</Menu>

UnStyled

Pass isUnstyled prop to remove style from a particular sub component.

<Menu>
  <MenuTrigger
    rightIcon={<ChevronDownIcon className="stroke-2" height={16} width={16}/>}
    size="icon"
  >
    Actions
  </MenuTrigger>
  <MenuContent
    className="dark:bg-secondary-800 rounded-md bg-white p-2"
    isUnstyled
  >
    <MenuItem>
      New Tab
    </MenuItem>
    <MenuItem>
      New Window
    </MenuItem>
    <MenuItem disabled>
      New Private Window{' '}
    </MenuItem>
  </MenuContent>
</Menu>

IsArrow

The isArrow prop exists in Menu Content subcomponent and is used to show/hide arrow on content. By default, its value is true.

<Menu>
  <MenuTrigger rightIcon={<ChevronDownIcon className="stroke-2" height={16} width={16}/>}>
    Actions
  </MenuTrigger>
  <MenuContent isArrow>
    <MenuItem>
      New Tab
    </MenuItem>
    <MenuItem>
      New Window
    </MenuItem>
    <MenuItem>
      New Private Window{' '}
    </MenuItem>
    <MenuLabel>
      People
    </MenuLabel>
    <MenuRadioGroup value="1">
      <MenuRadioItem value="1">
        Pedro Duarte
      </MenuRadioItem>
      <MenuRadioItem value="2">
        Colm Tuite
      </MenuRadioItem>
    </MenuRadioGroup>
  </MenuContent>
</Menu>

API

Root

Property	Description	Type	Default
isBarebone	Removes style from whole component	`boolean`	false

Trigger

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

Content

Property	Description	Type	Default
isArrow	Show arrow in content	`boolean`	true
isUnstyled	Removes style from component	`boolean`	false

Arrow

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

Item

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

Label

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

CheckboxItem

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

RadioItem

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

SubTrigger

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false

SubContent

Property	Description	Type	Default
isUnstyled	Removes style from component	`boolean`	false