Skip to main content

Dropdown

tip

The Dropdown's content must be inserted within the Dropdown.Header, Dropdown.Container, and Dropdown.Footer subcomponents. Doing that, all styles will work properly.

Anchor Element​

The Dropdown is positioned next to an anchor element, which will be a Button variant.

In most cases you only need to use the property renderAnchor to render the anchor. renderAnchor is a function that has the following properties:

  • anchorRef: Required reference that should be passed to the ref property of the component that will be rendered
  • toggle: Function that controls the Dropdown's open or close state. In general, it should be passed to the onClick property of the component that will be rendered

If for some reason renderAchor doens't fit your need, you can create your own achor element using the property anchorEl to link both of them. For that you will need to control the Dropdown open state.

Item types​

With auxiliary text​

Critical action​

When passing the property href to the Dropdown.Item it will automatically become a link.

You can also use it with React Router.

import { Link as LinkRouter } from 'react-router-dom';
import { Dropdown } from '@resultadosdigitais/tangram-components';

export default function ExampleMyComponent() {
  return (
    <Dropdown
      renderAnchor={({ anchorRef, toggle }) => (
        <IconButton
          id="dropdown-anchor"
          onClick={toggle}
          ref={anchorRef}
          kind={IconButton.kinds.secondary}
        >
          <ElipsisV title="Dots icon to show there are more options available" />
        </IconButton>
      )}
    >
      <Dropdown.Container>
        <Dropdown.Item label="Item 01" to="/my-path" as={LinkRouter} />
        <Dropdown.Item label="Item 02" />
        <Dropdown.Item label="Item 03" />
        <Dropdown.Item label="Item 04" />
      </Dropdown.Container>
    </Dropdown>
  );
}

With icon​

With Tag or Badge component​

Use the suffix property from Dropdown.Item to add the Tag or Badge components.

Empty state​

Use the renderEmptyState property from Dropdown.Container to add a message when there are no items.

Dividers​

Divider line​

Grouper with text​

Selection​

Simple selection​

Multiple selection​

Structure​

Positioning​

Dropdown adjusts its placement automatically if it doesn't have enough screen space to display the content at the defined position. If you need to specify an initial positioning, use the position property. See the Component API for more details.

With loading​

Use the loading property from Dropdown.Container when loading items from is asynchronous.

State management​

Uncontrolled​

Dropdown is uncontrolled by default. It's possible to set the initial open state in the uncontrolled with the defaultOpen property.

Controlled​

You can control the open state with the prop open.

You must create a state to manage your opening and closing interactions when utilizing controlled Dropdown.

Use when you need to create a navigation within the same Dropdown.

More than one level of navigation may be present in the Dropdown component, which is handled using Dropdown.Levels.

Dropdown.Levels render a component passed to the property renderLevels(Levels in the example). In the property rootLevel you must inform the name of the first level to be rendered

The component passed to the renderLevel must render it's content using the level property.

renderLevel provides the following properties to the component:

  • level: The level's name to be rendered
  • goBack: Function that returns to the previous level
  • goToLevel: Function that advance to the level name passed as parameter
  • toggle: Function that opens or closes the Dropdown
  • ...rest: In order to transmit information from the parent component to the renderer navigation level, any property supplied to the Dropdown.Levels subcomponent (with the exception of renderLevels and rootLevels) will be forwarded as a property of the renderLevels function argument.
import React from 'react';
import { Button, Dropdown } from '@resultadosdigitais/tangram-components';
import { DatePicker } from '@resultadosdigitais/tangram-react-datepicker';

const DEFAULT_PERIOD = 'default-period';
const CUSTOM_PERIOD = 'custom-period';

const Levels = ({ level, goToLevel, goBack, toggle, onApply }) => {
  if (level === CUSTOM_PERIOD) {
    return (
      <>
        <Dropdown.Header>
          <Dropdown.Navigation label="Custom period" back onClick={goBack} />
        </Dropdown.Header>
        <Dropdown.Container>
          <DatePicker inline />
        </Dropdown.Container>
        <Dropdown.Footer>
          <Button
            onClick={() => {
              toggle();
              onApply();
            }}
            kind={Button.kinds.primary}
            fluid
          >
            Apply
          </Button>
        </Dropdown.Footer>
      </>
    );
  }

  return (
    <Dropdown.Container>
      <Dropdown.Item label="Today" />
      <Dropdown.Item label="Yesterday" />
      <Dropdown.Item label="Last 7 days" />
      <Dropdown.Item label="Last 15 days" />
      <Dropdown.Item label="Last 30 days" />
      <Dropdown.Divider />
      <Dropdown.Navigation
        label="Custom period"
        onClick={() => {
          goToLevel(CUSTOM_PERIOD);
        }}
      />
    </Dropdown.Container>
  );
};

export default function DropdownNavigationExample() {
  return (
    <Dropdown
      renderAnchor={({ anchorRef, toggle }) => (
        <Button
          id="dropdown"
          onClick={toggle}
          ref={anchorRef}
          kind={Button.kinds.secondary}
        >
          Time slot
        </Button>
      )}
    >
      <Dropdown.Levels
        rootLevel={DEFAULT_PERIOD}
        renderLevels={Levels}
        onApply={() => alert('Custom date applied')}
      />
    </Dropdown>
  );
}

Example:

Feedback​