PatternFly Elements - Home PatternFly Elements

Dropdown

Overview

Dropdown provides a dropdown menu of links and/or actions.

PatternFly Elements PatternFly Disabled link

Installation

npm install @patternfly/pfe-dropdown

Usage

<pfe-dropdown label="Dropdown">
  <pfe-dropdown-item item-type="link">
    <a href="https://patternflyelements.org">PatternFly Elements</a>
  </pfe-dropdown-item>
  <pfe-dropdown-item item-type="link">
     <a href="https://patternfly.org">PatternFly</a>
  </pfe-dropdown-item>
  <pfe-dropdown-item item-type="link" is_disabled>
     <a href="https://redhat.com">Disabled link</a>
  </pfe-dropdown-item>
  <pfe-dropdown-item item-type="separator"></pfe-dropdown-item>
  <pfe-dropdown-item item-type="action">
     <button>Action 1</button>
  </pfe-dropdown-item>
</pfe-dropdown>

Provide dropdown items dynamically

let dropdown = document.querySelector("pfe-dropdown");

When pfe-dropdown is defined, via the whenDefined method. Pass an array of pfe-dropdown-item objects to pfeDropdownOptions.

customElements.whenDefined("pfe-dropdown").then(function() {
  dropdown.pfeDropdownOptions = [
    {
      href: "https://patternflyelements.org",
      text: "Link 1",
      type: "link",
      is_disabled: false
    },
    {
      href: "https://patternflyelements.org",
      text: "Link 2",
      type: "link",
      is_disabled: false
    },
    {
      href: "https://patternflyelements.org",
      text: "Link 3",
      type: "link",
      is_disabled: true
    },
    {
      type: "separator"
    },
    {
      text: "Action 1",
      type: "action",
      is_disabled: false
    },
    {
      text: "Action 2",
      type: "action",
      is_disabled: true
    }
  ];
});

Add dropdown items dynamically

Add individual dropdown items with the addDropdownOptions method. Pass an array of pfe-dropdown-item objects to addDropdownOptions.

customElements.whenDefined("pfe-dropdown").then(function() {
  dropdown.addDropdownOptions(
    [
      {
        href: "https://patternflyelements.org",
        text: "Link 4",
        type: "link",
        is_disabled: false
      }
    ]
  );
});

Slots

Default slot

The default slot should contain at least one link or action pfe-dropdown-item .

Attributes

pfe-dropdown

pfe-dropdown-item

Methods

open

Manually opens the dropdown menu.

document.querySelector("pfe-dropdown").open();

close

Manually closes the dropdown menu.

document.querySelector("pfe-dropdown").close();

Events

pfe-dropdown:change

When an item is selected, this event is fired. It includes the inner text of the item that was selected.

Styling hooks

None