Dropdown

Enables native inputs to be used within a Form field.

Overview

Playground

API

Usage

Cut ⌘X

Copy ⌘C

Paste ⌘X

Bold

Italic

Delete



  <pc-dropdown>
    <wc-button>
      <wc-icon slot="icon" name="menu"></wc-icon>
    </wc-button>

    <pc-dropdown-menu>
  <pc-menu-item value="cut">
    Cut
    <span slot="end">⌘X</span>
  </pc-menu-item>
  <pc-menu-item value="copy">
    Copy
    <span slot="end">⌘C</span>
  </pc-menu-item>
  <pc-menu-item value="paste">
    Paste
    <span slot="end">⌘X</span>
  </pc-menu-item>
  <pc-menu-divider></pc-menu-divider>
  <pc-menu-item value="bold" selected="true">
    Bold
  </pc-menu-item>
  <pc-menu-item value="italic">
    Italic
  </pc-menu-item>
  <pc-menu-divider></pc-menu-divider>
  <pc-menu-item value="delete" color="danger">
    Delete
    <wc-icon name="delete" slot="end"></wc-icon>
  </pc-menu-item>
</pc-dropdown-menu>
  </pc-dropdown>


  <pc-dropdown id="dropdown" placements="bottom-end">
    <wc-button variant="text"><wc-icon slot="icon" name="menu"></wc-icon></wc-button>

    <pc-dropdown-menu>
  <pc-menu-item value="cut">
    Cut
    <span slot="end">⌘X</span>
  </pc-menu-item>
  <pc-menu-item value="copy">
    Copy
    <span slot="end">⌘C</span>
  </pc-menu-item>
  <pc-menu-item value="paste">
    Paste
    <span slot="end">⌘X</span>
  </pc-menu-item>
  <pc-menu-divider></pc-menu-divider>
  <pc-menu-item value="bold" selected="true">
    Bold
  </pc-menu-item>
  <pc-menu-item value="italic">
    Italic
  </pc-menu-item>
  <pc-menu-divider></pc-menu-divider>
  <pc-menu-item value="delete" color="danger">
    Delete
    <wc-icon name="delete" slot="end"></wc-icon>
  </pc-menu-item>
</pc-dropdown-menu>
  </pc-dropdown>

Placements

The dropdown can be positioned relative to the trigger element. Possible positions are: top-start, top-end, bottom-end, bottom-start.

You can also use the positions attribute to set all preferred position of the dropdown. On scroll, the dropdown will be repositioned to the closest position.

On this page

Work in progress

Properties

Events

Methods

CSS Custom Properties

Next Previous