5.1.4
Powered by Modulz

CategoricMenu

Menu displays a list of grouped choices with section titles on temporary surfaces.

() => {

  return <CategoricMenu buttonText="Open Menu" />;

};

Props

PropTypeDefaultDescription
aria-labeltext
anchorOrigin{ horizontal: 'center' | 'left' | 'right' | number, vertical: 'bottom' | 'center' | 'top' | number }{ vertical: 'bottom', horizontal: 'left' }This is the point on the anchor where the popover's anchorEl will attach to. This is not used when the anchorReference is 'anchorPosition'. Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
buttonText'JSX.Element' | 'string'Text or element to display in the button for the menu.
buttonVariant'text' | 'outlined' | 'contained'containedThe variant to use.
buttonSxSxPropsThe system prop that allows defining system overrides as well as additional CSS styles, specifically for the menu button.
data-testidstringdata-testid added to the root element of the component as {data-testid} and {data-testid}-button, with sub items as {data-testid}-{item.primary}
handleNavigationClickfuncFunction passed in to handle url/navigation. Signature: function(url:string) => (e: React.MouseEvent) => void
options{category: string; primary: string; secondary: string; url: string | null}[]Array of objects with category, primary and secondary information, and a url if defined
sortbooleanIf true, the items in options will be sorted alphabetically based on the category.
sortOrderstring[]An array of specified order of categories.
style{}CSS properties applied to the menu's paper component.
sxArray<func | object | bool> | func | objectThe system prop that allows defining system overrides as well as additional CSS styles.
transformOrigin{ horizontal: 'center' | 'left' | 'right' | number, vertical: 'bottom' | 'center' | 'top' | number }{ vertical: 'top', horizontal: 'left', }This is the point on the popover which will attach to the anchor's origin. Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)].

Examples

Simple Menu

() => {

  const unvettedData = data.searchData;



  const vettedData = unvettedData.map((item) => {

    return {

      category: item.firstName[0],

      primary: `${item.firstName} ${item.lastName}`,

      secondary: item.subTitle,

    };

  });



  return (

    <CategoricMenu

      buttonText="Open Menu"

      buttonVariant="text"

      options={vettedData}

    />

  );

};

Sorted Menu

() => {

  const unvettedData = data.searchData;



  const vettedData = unvettedData.map((item) => {

    return {

      category: item.firstName,

      primary: `${item.firstName} ${item.lastName}`,

      secondary: item.subTitle,

    };

  });



  return <CategoricMenu buttonText="Open Menu" options={vettedData} sort />;

};

Categorized Menu

() => {

  const unvettedData = data.searchData;



  const vettedData = unvettedData.map((item) => {

    return {

      category: item.firstName[0],

      primary: `${item.firstName} ${item.lastName}`,

      secondary: item.subTitle,

    };

  });



  const order = ['Z', 'B', 'M', 'F', 'J', 'W'];



  return (

    <CategoricMenu

      buttonText="Open Menu"

      options={vettedData}

      data={vettedData}

      sortOrder={order}

    />

  );

};

() => {

  const unvettedData = data.searchData;



  const vettedData = unvettedData.map((item) => {

    return {

      category: item.firstName[0],

      primary: `${item.firstName} ${item.lastName}`,

      secondary: item.subTitle,

    };

  });



  return (

    <CategoricMenu

      buttonText="Open Menu"

      options={vettedData}

      data={vettedData}

      style={{ minWidth: 400, maxHeight: 360 }}

    />

  );

};