Dropdown

Overview

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

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" 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 options.

await customElements.whenDefined("pfe-dropdown");
dropdown.options = [
  {
    href: "https://patternflyelements.org",
    text: "Link 1",
    type: "link",
    disabled: false
  },
  {
    href: "https://patternflyelements.org",
    text: "Link 2",
    type: "link",
    disabled: false
  },
  {
    href: "https://patternflyelements.org",
    text: "Link 3",
    type: "link",
    disabled: true
  },
  {
    type: "separator"
  },
  {
    text: "Action 1",
    type: "action",
    disabled: false
  },
  {
    text: "Action 2",
    type: "action",
    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",
        disabled: false
      }
    ]
  );
});

Slots

Default Slot

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

Slots on pfe-dropdown-item

Attributes

label

This is an optional attribute string that you can provide to describe your dropdown, which appears in the dropdown toggle.

DOM Property

label

Type

string

Default

'Dropdown'

disabled

This is an optional attribute that you can provide to disable your dropdown. Visually the dropdown will look disabled and mouse or keyboard events will have no impact on it.

DOM Property

disabled

Type

boolean

Default

false

expanded

DOM Property

expanded

Type

boolean

Default

false

Attributes on pfe-dropdown-item

item-type

This is an optional attribute string that you should provide to indicate the type of dropdown item. This drives the appropriate assignment of accessibility attributes for each type of item.

• link : an HTML link
• action : a button that triggers some sort of action
• separator : a visual separator for items in the list

DOM Property

itemType

Type

'link'|'action'|'separator' | undefined

Default

unknown

disabled

Disabled item

DOM Property

disabled

Type

boolean

Default

false

DOM Properties

options

Add dropdown items dynamically

Type

PfeDropdownOption[] | undefined

Default

unknown

Properties on pfe-dropdown-item

containerRole

Type

'none'|'menuitem'|'separator' | undefined

Default

unknown

Methods

addDropdownOptions(options: PfeDropdownOption[])

Add dropdown items dynamically

open()

Manually opens the dropdown menu.

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

close()

Manually closes the dropdown menu.

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

toggle()

Manually toggles the dropdown menu.

document.querySelector('pfe-dropdown').toggle();

Events

change

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

Event Type:

DropdownChangeEvent

CSS Custom Properties

CSS Shadow Parts

container

The dropdown container

button

The dropdown's toggle button

menu

The dropdown's menu