Skip to main content

Menu

A dropdown menu

http://localhost:3000
<Menu>
  <MenuItem label="Track" startIcon={<Route />} />
  <MenuGroup label="Initiate" startIcon={<Carrier />}>
    <MenuItem label="Shipments" />
    <MenuItem label="Templates" />
  </MenuGroup>
</Menu>

Usage​

Controlled​

A menu group's state can be fully controlled.

http://localhost:3000
function Controlled() {
  const [isExpanded, setIsExpanded] = React.useState(true);

  return (
    <Menu>
      <MenuItem label="Track" startIcon={<Route />} />
      <MenuGroup
        isExpanded={isExpanded}
        label="Initiate"
        startIcon={<Carrier />}
        onExpandedChange={setIsExpanded}
      >
        <MenuItem label="Shipments" />
        <MenuItem label="Templates" />
      </MenuGroup>
    </Menu>
  );
}

Selected​

Display a selected state on a menu item.

http://localhost:3000
<Menu>
  <MenuItem label="Track" startIcon={<Route />} />
  <MenuGroup label="Initiate" startIcon={<Carrier />}>
    <MenuItem label="Shipments" />
    <MenuItem isSelected label="Templates" />
  </MenuGroup>
</Menu>

Props​

as?The root element to be rendered
as?The root element to be rendered
as?The root element to be rendered