Icon Menu

Icon Menu is a combination of Icon Button and Menu List Item.

Example

Live Editor

function MyMenuIcon () { const companyItems = [ {id: '1', label: 'Another company', icon: 'Camera'}, {id: '2', label: 'Blue company', icon: 'Bell'}, {id: '3', label: 'Delta company', icon: 'Clock'} ] const [currentItemID, setCurrentItemID] = useState(companyItems[0].id); return ( <IconMenu iconName='Key' isSelectable={true}> <IconMenu.Header> <Input aria-label="Search" type="search" placeholder="Search" css={{ width: '100%' }} /> </IconMenu.Header> {companyItems.map((item, i) => { return ( <IconMenu.MenuItem key={i} id={item.id} icon={item.icon} isActive={item.id === currentItemID} onClick={() => setCurrentItemID(item.id)}> {item.label} </IconMenu.MenuItem> ); })} <IconMenu.Action> <Button label="Change Account" size="small" /> </IconMenu.Action> <IconMenu.Footer> <Button iconName="CogWheel" iconAlignment="left" label="Account Settings" size="small" css={{ marginRight: '14px' }} /> <Button iconName="LogOut" iconAlignment="left" label="Logout" size="small" /> </IconMenu.Footer> </IconMenu> ) }

function MyMenuIcon () {

  const companyItems = [
    {id: '1', label: 'Another company', icon: 'Camera'},
    {id: '2', label: 'Blue company', icon: 'Bell'},
    {id: '3', label: 'Delta company', icon: 'Clock'}
  ]
  const [currentItemID, setCurrentItemID] = useState(companyItems[0].id);
  
  return (
    <IconMenu iconName='Key' isSelectable={true}>
      <IconMenu.Header>
        <Input
          aria-label="Search"
          type="search"
          placeholder="Search"
          css={{ width: '100%' }}
        />
      </IconMenu.Header>
      {companyItems.map((item, i) => {
        return (
          <IconMenu.MenuItem
            key={i}
            id={item.id}
            icon={item.icon} 
            isActive={item.id === currentItemID}
            onClick={() => setCurrentItemID(item.id)}>
            {item.label}
          </IconMenu.MenuItem>
        );
      })}
      <IconMenu.Action>
        <Button label="Change Account" size="small" />
      </IconMenu.Action>
      <IconMenu.Footer>
        <Button
          iconName="CogWheel"
          iconAlignment="left"
          label="Account Settings"
          size="small"
          css={{ marginRight: '14px' }}
        />
        <Button
          iconName="LogOut"
          iconAlignment="left"
          label="Logout"
          size="small"
        />
      </IconMenu.Footer>
    </IconMenu>
  )
}

Result

Loading...

Sub Component

<IconMenu /> has 5 sub components:

• <IconMenu.MenuItem /> supports list menu items
• <IconMenu.Header /> supports layout, e.g: search box, title.
• <IconMenu.Content /> supports layout.
• <IconMenu.Action /> supports layout.
• <IconMenu.Footer /> supports layout.

Variant

Icon Button

The component supports to customize the icon button, such as: iconName, iconSize, iconKind.

Live Editor

function MyMenuIcon () { const companyItems = [ {label: 'Another company', icon: 'Camera'}, {label: 'Blue company', icon: 'Bell'}, {label: 'Delta company', icon: 'Clock'} ] const IconMenuAction = ({iconName, iconSize, iconKind}) => { return ( <IconMenu iconName={iconName} iconSize={iconSize} iconKind={iconKind} > {companyItems.map((item, i) => { return ( <IconMenu.MenuItem key={i} icon={item.icon} onClick={() => console.log('clicked', item.label)}> {item.label} </IconMenu.MenuItem> ); })} </IconMenu> ) } return ( <div style={{display: 'flex', gap: '20px'}}> <IconMenuAction iconName='Question' iconSize='small' /> <IconMenuAction iconName='Key' iconSize='small' iconKind='negative'/> <IconMenuAction iconName='Person' /> <IconMenuAction iconName='Person' iconKind='primary'/> </div> ) }

function MyMenuIcon () {

  const companyItems = [
    {label: 'Another company', icon: 'Camera'},
    {label: 'Blue company', icon: 'Bell'},
    {label: 'Delta company', icon: 'Clock'}
  ]
  const IconMenuAction = ({iconName, iconSize, iconKind}) => {
    return (
      <IconMenu 
        iconName={iconName} 
        iconSize={iconSize}
        iconKind={iconKind}
      >
        {companyItems.map((item, i) => {
          return (
            <IconMenu.MenuItem
              key={i}
              icon={item.icon} 
              onClick={() => console.log('clicked', item.label)}>
              {item.label}
            </IconMenu.MenuItem>
          );
        })}
      </IconMenu>
    )
  }
  
  return (
    <div style={{display: 'flex', gap: '20px'}}>
      <IconMenuAction iconName='Question' iconSize='small' />
      <IconMenuAction iconName='Key' iconSize='small' iconKind='negative'/>
      <IconMenuAction iconName='Person' />
      <IconMenuAction iconName='Person' iconKind='primary'/>
    </div>
    
  )
}

Result

Loading...

Menu Position

The component supports to customize the menu position, such as: placement, offSet.

If no specifying the placement, the placement will be auto.

Live Editor

function MyMenuIcon () { const companyItems = [ {label: 'Another company', icon: 'Camera'}, {label: 'Blue company', icon: 'Bell'}, {label: 'Delta company', icon: 'Clock'} ] const IconMenuAction = ({placement, offSet}) => { return ( <IconMenu iconName='Person' placement={placement} offSet={offSet}> {companyItems.map((item, i) => { return ( <IconMenu.MenuItem key={i} icon={item.icon} onClick={() => console.log('clicked', item.label)}> {item.label} </IconMenu.MenuItem> ); })} </IconMenu> ) } return ( <div style={{display: 'flex', gap: '20px'}}> <IconMenuAction placement="left-start" /> <IconMenuAction placement="bottom-start" /> <IconMenuAction offSet={20} /> </div> ) }

function MyMenuIcon () {

  const companyItems = [
    {label: 'Another company', icon: 'Camera'},
    {label: 'Blue company', icon: 'Bell'},
    {label: 'Delta company', icon: 'Clock'}
  ]
  const IconMenuAction = ({placement, offSet}) => {
    return (
      <IconMenu 
        iconName='Person' 
        placement={placement}
        offSet={offSet}>
        {companyItems.map((item, i) => {
          return (
            <IconMenu.MenuItem
              key={i}
              icon={item.icon} 
              onClick={() => console.log('clicked', item.label)}>
              {item.label}
            </IconMenu.MenuItem>
          );
        })}
      </IconMenu>
    )
  }
  
  return (
    <div style={{display: 'flex', gap: '20px'}}>
      <IconMenuAction placement="left-start" />
      <IconMenuAction placement="bottom-start" />
      <IconMenuAction offSet={20} />
    </div>
    
  )
}

Result

Loading...

Menu Items

The component supports to render items as a menu list with MenuItem with following features:

• It allows item to be checked by adding isSelectable to IconMenu and isActive to selected MenuItem.

• It also allows to disable an item by adding isDisabled to MenuItem.

• Menu will be closed after clicking an item by default. To prevent this behavior, you can add closeMenuOnClick={false} to MenuItem.

Live Editor

function MyMenuIcon () { const companyItems = [ {id: '1', label: 'Another company'}, {id: '2', label: 'Blue company'}, {id: '3', label: 'Delta company'}, {id: '4', label: 'Beta company', isDisabled: true} ] const [currentItemID, setCurrentItemID] = useState(companyItems[0].id); return ( <div style={{ display: 'flex', gap: '10px' }}> <span>{companyItems.find(item => item.id === currentItemID).label}</span> <IconMenu iconName='Data' isSelectable={true}> {companyItems.map((item, i) => { return ( <IconMenu.MenuItem closeMenuOnClick={false} key={i} id={item.id} isActive={item.id === currentItemID} isDisabled={item.isDisabled} onClick={() => setCurrentItemID(item.id)}> {item.label} </IconMenu.MenuItem> ); })} </IconMenu> </div> ) }

function MyMenuIcon () {

  const companyItems = [
    {id: '1', label: 'Another company'},
    {id: '2', label: 'Blue company'},
    {id: '3', label: 'Delta company'},
    {id: '4', label: 'Beta company', isDisabled: true}
  ]
  const [currentItemID, setCurrentItemID] = useState(companyItems[0].id);
  
  return (
    <div style={{ display: 'flex', gap: '10px' }}>
      <span>{companyItems.find(item => item.id === currentItemID).label}</span>
      <IconMenu iconName='Data' isSelectable={true}>
      {companyItems.map((item, i) => {
        return (
          <IconMenu.MenuItem
            closeMenuOnClick={false}
            key={i}
            id={item.id}
            isActive={item.id === currentItemID}
            isDisabled={item.isDisabled}
            onClick={() => setCurrentItemID(item.id)}>
            {item.label}
          </IconMenu.MenuItem>
        );
      })}
    </IconMenu>
    </div>
    
  )
}

Result

Loading...

Layouts

The component supports different padding layout: Header, Content, Action, Footer.

Live Editor

function MyMenuIcon () { return ( <IconMenu iconName='Key' isSelectable={true}> <IconMenu.Header> <Input aria-label="Search" type="search" placeholder="Search" css={{ width: '100%' }} /> </IconMenu.Header> <IconMenu.Content> <div> <Text type="body1">Jason Olexander McQueen</Text> <Text type="body2">Very Long Company Name LLC</Text> </div> </IconMenu.Content> <IconMenu.Action> <Button label="Change Account" size="small" /> </IconMenu.Action> <IconMenu.Footer> <Button iconName="CogWheel" iconAlignment="left" label="Account Settings" size="small" css={{ marginRight: '14px' }} /> <Button iconName="LogOut" iconAlignment="left" label="Logout" size="small" /> </IconMenu.Footer> </IconMenu> ) }

function MyMenuIcon () {

  return (
    <IconMenu iconName='Key' isSelectable={true}>
      <IconMenu.Header>
        <Input
          aria-label="Search"
          type="search"
          placeholder="Search"
          css={{ width: '100%' }}
        />
      </IconMenu.Header>
      <IconMenu.Content>
        <div>
          <Text type="body1">Jason Olexander McQueen</Text>
          <Text type="body2">Very Long Company Name LLC</Text> 
        </div>
      </IconMenu.Content>
      <IconMenu.Action>
        <Button label="Change Account" size="small" />
      </IconMenu.Action>
      <IconMenu.Footer>
        <Button
          iconName="CogWheel"
          iconAlignment="left"
          label="Account Settings"
          size="small"
          css={{ marginRight: '14px' }}
        />
        <Button
          iconName="LogOut"
          iconAlignment="left"
          label="Logout"
          size="small"
        />
      </IconMenu.Footer>
    </IconMenu>
  )
}

Result

Loading...

Open State

The component supports to manage the open state with several props

• isMenuOpen to set open state of menu.
• onToggle to inform the open state of menu after clicking on icon button or menu item.
• closeMenuOutside to close the menu when clicking outside. By default, menu is closed when clicking outside. To prevent this behavior, you can add closeMenuOutside={false} to component.
• onClick to overwrite the onClick event of Icon Button. Please be careful if using this prop, you should handle the open state by yourself.

warning

onToggle doesn't work along with closeMenuOutside, closeMenuOnClick and onClick.

Live Editor

function MyMenuIcon () { const [isOpen, setIsOpen] = useState(false); const companyItems = [ {id: '1', label: 'Another company', icon: 'Camera'}, {id: '2', label: 'Blue company', icon: 'Bell'}, {id: '3', label: 'Delta company', icon: 'Clock'} ] const [currentItemID, setCurrentItemID] = useState(companyItems[0].id); const onMenuToggle = (isVisible) => { console.log('is menu open', isVisible) } const handleClick = (id) => { setCurrentItemID(id); setIsOpen(false); } return ( <div style={{ display: 'flex', gap: '10px' }}> <span>{companyItems.find(item => item.id === currentItemID).label}</span> <IconMenu iconName='Data' isMenuOpen={isOpen} onToggle={onMenuToggle} closeMenuOutside={false} > {companyItems.map((item, i) => { return ( <IconMenu.MenuItem key={i} id={item.id} icon={item.icon} isActive={item.id === currentItemID} onClick={() => handleClick(item.id)}> {item.label} </IconMenu.MenuItem> ); })} </IconMenu> </div> ) }

function MyMenuIcon () {

  const [isOpen, setIsOpen] = useState(false);

  const companyItems = [
    {id: '1', label: 'Another company', icon: 'Camera'},
    {id: '2', label: 'Blue company', icon: 'Bell'},
    {id: '3', label: 'Delta company', icon: 'Clock'}
  ]
  const [currentItemID, setCurrentItemID] = useState(companyItems[0].id);

  const onMenuToggle = (isVisible) => {
     console.log('is menu open', isVisible)
  }

  const handleClick = (id) => {
    setCurrentItemID(id);
    setIsOpen(false);
  }
  
  return (
    <div style={{ display: 'flex', gap: '10px' }}>
      <span>{companyItems.find(item => item.id === currentItemID).label}</span>
      <IconMenu 
        iconName='Data' 
        isMenuOpen={isOpen}
        onToggle={onMenuToggle}
        closeMenuOutside={false}
      >
      {companyItems.map((item, i) => {
        return (
          <IconMenu.MenuItem
            key={i}
            id={item.id}
            icon={item.icon}
            isActive={item.id === currentItemID}
            onClick={() => handleClick(item.id)}>
            {item.label}
          </IconMenu.MenuItem>
        );
      })}
    </IconMenu>
    </div>
    
  )
}

Result

Loading...

Live Editor

function MyMenuIcon () { const [isOpen, setIsOpen] = useState(false); const companyItems = [ {id: '1', label: 'Another company', icon: 'Camera'}, {id: '2', label: 'Blue company', icon: 'Bell'}, {id: '3', label: 'Delta company', icon: 'Clock'} ] const [currentItemID, setCurrentItemID] = useState(companyItems[0].id); return ( <div style={{ display: 'flex', gap: '10px' }}> <span>{companyItems.find(item => item.id === currentItemID).label}</span> <IconMenu iconName='Data' isMenuOpen={isOpen} onClick={(isOpen) => setIsOpen(!isOpen)} > {companyItems.map((item, i) => { return ( <IconMenu.MenuItem key={i} id={item.id} icon={item.icon} isActive={item.id === currentItemID} closeMenuOnClick={false}> {item.label} </IconMenu.MenuItem> ); })} </IconMenu> </div> ) }

function MyMenuIcon () {

  const [isOpen, setIsOpen] = useState(false);

  const companyItems = [
    {id: '1', label: 'Another company', icon: 'Camera'},
    {id: '2', label: 'Blue company', icon: 'Bell'},
    {id: '3', label: 'Delta company', icon: 'Clock'}
  ]
  const [currentItemID, setCurrentItemID] = useState(companyItems[0].id);
  
  return (
    <div style={{ display: 'flex', gap: '10px' }}>
      <span>{companyItems.find(item => item.id === currentItemID).label}</span>
      <IconMenu 
        iconName='Data' 
        isMenuOpen={isOpen}
        onClick={(isOpen) => setIsOpen(!isOpen)}
      >
      {companyItems.map((item, i) => {
        return (
          <IconMenu.MenuItem
            key={i}
            id={item.id}
            icon={item.icon}
            isActive={item.id === currentItemID}
            closeMenuOnClick={false}>
            {item.label}
          </IconMenu.MenuItem>
        );
      })}
    </IconMenu>
    </div>
    
  )
}

Result

Loading...

Custom Icon Element

The component is using IconButton to trigger the menu by default. But you can customise the icon with other Icon Components such as: BrandIcon, AppIcon, and Icon by adding customIconElement to <IconMenu>.

Live Editor

function MyMenuIcon () { const companyItems = [ {label: 'Another company', icon: 'Camera'}, {label: 'Blue company', icon: 'Bell'}, {label: 'Delta company', icon: 'Clock'} ] const IconMenuAction = ({customIcon}) => { return ( <IconMenu customIcon={customIcon} > {companyItems.map((item, i) => { return ( <IconMenu.MenuItem key={i} icon={item.icon} onClick={() => console.log('clicked', item.label)}> {item.label} </IconMenu.MenuItem> ); })} </IconMenu> ) } return ( <div style={{display: 'flex', gap: '20px'}}> <IconMenuAction customIcon={<BrandIcon type="appview" />} /> <IconMenuAction customIcon={<Icon name="Plus" color='#255EEE' size='large' />} /> <IconMenuAction customIcon={<AppIcon appId="com.adjust.insights" appName="adjust Insights" size="small" />} /> </div> ) }

function MyMenuIcon () {

  const companyItems = [
    {label: 'Another company', icon: 'Camera'},
    {label: 'Blue company', icon: 'Bell'},
    {label: 'Delta company', icon: 'Clock'}
  ]
  const IconMenuAction = ({customIcon}) => {
    return (
      <IconMenu 
        customIcon={customIcon}
      >
        {companyItems.map((item, i) => {
          return (
            <IconMenu.MenuItem
              key={i}
              icon={item.icon} 
              onClick={() => console.log('clicked', item.label)}>
              {item.label}
            </IconMenu.MenuItem>
          );
        })}
      </IconMenu>
    )
  }
  
  return (
    <div style={{display: 'flex', gap: '20px'}}>
      <IconMenuAction customIcon={<BrandIcon type="appview" />} />
      <IconMenuAction customIcon={<Icon name="Plus" color='#255EEE' size='large' />} />
      <IconMenuAction customIcon={<AppIcon appId="com.adjust.insights" appName="adjust Insights" size="small" />} />
    </div>
    
  )
}

Result

Loading...

Props

IconMenu

Name	Type	Default
iconName Name of Icon Button	"AddValue" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown" | "ArrowDownLeft" | "A...	—
iconSize Size of Icon Button	"small" | "medium"	"medium"
iconKind Kind of Icon Button	"negative" | "positive" | "warning" | "primary" | "dark" | "light"	"light"
isSelectable allow checked state of menu item	boolean	false
itemSize row size of menu item	"small" | "medium"	"small"
isMenuOpen open state of menu	boolean	—
onToggle a callback to inform the open state of menu after clicking on icon button or menu item. onToggle doesn't work along with closeMenuOutside, closeMenuOnClick and onClick	((isOpen: boolean) => void)	—
onClick onClick event to overwrite the behavior of Icon Button's onClick	((isOpen: boolean) => void)	—
closeMenuOutside menu is closed if clicking outside	boolean	true
width width of menu	number	—
placement placement of menu	"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"	—
offSet offset of menu	number	1
aria-label aria-label of Icon Button	string	—
aria-labelledby aria-labelledby of Icon Button	string	—
children sub components	ReactNode	—
dataTestId test id of components	string	"icon-menu-test-id"
customIcon Allow to customize Icon to trigger menu: BrandIcon, AppIcon and Icon	ReactNode	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

IconMenu.MenuItem

Name	Type	Default
id id of menu item	IDtype	—
isActive active (checked) state of menu item	boolean	false
isDisabled menu item is disabled	boolean	—
icon icon name of menu item	"AddValue" | "AppGrid" | "ArrowCircleLeft" | "ArrowCircleRight" | "ArrowDown" | "ArrowDownLeft" | "A...	—
onClick onClick handler of menu item	((id: IDtype) => void)	—
closeMenuOnClick menu is closed after clicking	boolean	true
children sub components	ReactNode	—
dataTestId test id of menu item	string	"`icon-menu-item-${id || '0'}`"
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.