Nebula

menu

Import

import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  MenuGroup,
  MenuDivider,
  MenuOptionGroup,
  MenuItemOption,
} from '@xpanseinc/nebula'

Usage

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuItem icon={<PlusIcon />}>
      New
    </MenuItem>

    <MenuDivider />

    <MenuGroup title="Profile">
      <MenuItem>
        Account
      </MenuItem>

      <MenuItem disabled>
        Settings
      </MenuItem>
    </MenuGroup>

    <MenuDivider />

    <MenuItem>
      Logout
    </MenuItem>
  </MenuList>
</Menu>

Typeahead navigation

When focus is on or within the menu, pressing a letter key will perform a typeahead search of the menu items and select the first match.

MenuGroup

Group related menu items together using the MenuGroup component. Pass a title to provide a label for the group.

<Menu>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
    Menu
  </MenuButton>

  <MenuList>
    <MenuGroup title="Profile">
      <MenuItem>
        Account
      </MenuItem>

      <MenuItem>
        Settings
      </MenuItem>
    </MenuGroup>
  </MenuList>
</Menu>

MenuOptionGroup

To provide a group of radio or checkbox options for a menu item, use the MenuOptionGroup. With type checkbox, defaultValue takes an array of values, while with type radio, defaultValue takes a single value.

<Menu closeOnSelect={false}>
  <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
    Filter
  </MenuButton>

  <MenuList>
    <MenuOptionGroup
      title="Status"
      type="checkbox"
      defaultValue={['active', 'inactive', 'locked']}
    >
      <MenuItemOption value="active">
        Active
      </MenuItemOption>

      <MenuItemOption value="inactive">
        Inactive
      </MenuItemOption>

      <MenuItemOption value="locked">
        Locked
      </MenuItemOption>
    </MenuOptionGroup>

    <MenuDivider />

    <MenuOptionGroup title="Order by" type="radio" defaultValue="asc">
      <MenuItemOption value="asc">
        Ascending
      </MenuItemOption>

      <MenuItemOption value="desc">
        Descending
      </MenuItemOption>
    </MenuOptionGroup>
  </MenuList>
</Menu>