Dropdown menu button

Dropdown menu button in Storybook

The DropdownMenuButton component renders a button. When the user clicks the button, it renders a tree of any of the following:

• DropdownMenuLink
• DropdownMenuSeparator
• DropdownMenuHeader

You can also include any React component in the hierarchy. In this case, however, styling may not be consistent and other unforeseen issues may occur.

Example

The following example demonstrates how to hook up a simple trigger to a DropdownMenu component.

• Note the implementation of the renderTrigger function which contains a ref extracted from the first argument of the callback.
• The ref is passed to the Button which is returned from the function.

import { Button, DropdownMenu, DropdownMenuHeader } from '@jutro/components';
import { DropdownMenuLink } from '@jutro/router';
import React, { useRef } from 'react';

const notification = { read: false };

export const DropdownMenuExample = () => {
  const dropdownMenuToggleRef = useRef();

  const renderTrigger = ({ ref }, toggle) => {
    dropdownMenuToggleRef.current = toggle;

    return (
      <Button
        ref={ref}
        icon="gw-bathtub"
        label="More options"
        onClick={(event) => {
          event.stopPropagation();
          event.preventDefault();

          toggle();
        }}
      />
    );
  };

  return (
    <DropdownMenu
      id="dropdownMenu"
      renderTrigger={renderTrigger}
      // `noPortal` is here to work around a Jutro bug when rendering in docs
      noPortal
    >
      <DropdownMenuHeader title="Manage your messages" />
      <DropdownMenuLink
        onClick={(event) => {
          event.stopPropagation();
          event.preventDefault();

          console.log('Marked as unread');
        }}
      >
        {notification.read ? 'Mark as unread' : 'Mark as read'}
      </DropdownMenuLink>
      <DropdownMenuLink
        onClick={(event) => {
          event.stopPropagation();
          event.preventDefault();

          console.log('Deleted!');
        }}
        icon="gw-delete"
      >
        Delete!
      </DropdownMenuLink>
    </DropdownMenu>
  );
};

For more examples, see Storybook.