About

The dropdown component is a temporary UI element that appears along one edge of the bonaparte-dropdown tag when open.

Example

Example

Attributes

Position

Default
Top Top Left Top Right
Right Right Top Right Bottom
Bottom Bottom Left Bottom Right
Left Left Top Left Bottom

Action

Default mouseover mouseenter

Handler

Default i.icon

Code

  <bonaparte-dropdown>
    <div class="menu">
      <bonaparte-button class="...">
        ...
      </bonaparte-button>
    </div>
    <bonaparte-button class="ui button marginless">
      Example <i class="more-vert icon right"></i>
    </bonaparte-button>
  </bonaparte-dropdown>

Dropdowns as Menus

Menu 1 Item 2 Item 3
Menu 4
  <bonaparte-dropdown class="menuExample">
    <div class="menu">
      <bonaparte-button class="ui button labeled monochrome marginless">
        New
        <i class="content-copy icon right"></i>
      </bonaparte-button>
      <bonaparte-button class="ui button labeled monochrome marginless">
        Open
        <i class="description icon right"></i>
      </bonaparte-button>
      <bonaparte-dropdown position="right" action="" handler="">
        <div class="menu">
          <bonaparte-button class="ui button labeled monochrome marginless">
            File one
          </bonaparte-button>
          <bonaparte-button class="ui button labeled monochrome marginless">
            File two
          </bonaparte-button>
          <bonaparte-button class="ui button labeled monochrome marginless">
            File three
          </bonaparte-button>
          <bonaparte-button class="ui button labeled monochrome marginless">
            File four
          </bonaparte-button>
        </div>
        <bonaparte-button class="ui button monochrome marginless">
          <i class="navigate-next icon right"></i>
          Open Recent
        </bonaparte-button>
      </bonaparte-dropdown>
      <bonaparte-button class="ui button labeled monochrome marginless">
        Label
        <i class="local-offer icon right"></i>
      </bonaparte-button>
      <bonaparte-button class="ui button labeled monochrome marginless">
        Exit
        <i class="cancel icon right"></i>
      </bonaparte-button>
    </div>
    <bonaparte-button class="ui button marginless">
      Menu 1
      <i class="arrow-drop-down icon right"></i>
    </bonaparte-button>
  </bonaparte-dropdown>
  <bonaparte-button class="ui button labeled marginless">
    Item 2
  </bonaparte-button>
  <bonaparte-button class="ui button labeled marginless">
    Item 3
  </bonaparte-button>
  <bonaparte-dropdown class="menuExample" position="top right">
    <bonaparte-dropdown class="menuExample" position="right" handler="input" action="focus, blur">
      <div class="imageList">
        <div class="ui divided items">
          <div class="link item">
            <div class="ui tiny image">
              <img src="images/wireframe/image.png">
            </div>
            <div class="content">
              <a class="header">Content Header</a>
              <div class="description">
                A description which may flow for several lines and give context to the content.
              </div>
            </div>
          </div>
          <div class="link item">
            <div class="ui tiny image">
              <img src="images/wireframe/image.png">
            </div>
            <div class="content">
              <a class="header">Content Header</a>
              <div class="description">
                A description which may flow for several lines and give context to the content.
              </div>
            </div>
          </div>
          <div class="link item">
            <div class="ui tiny image">
              <img src="images/wireframe/image.png">
            </div>
            <div class="content">
              <a class="header">Content Header</a>
              <div class="description">
                A description which may flow for several lines and give context to the content.
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="searchMenu">
        <div class="ui form">
          <div class="field">
            <input placeholder="Search" type="text">
            <label>Image Search</label>
          </div>
        </div>
      </div>
    </bonaparte-dropdown>
    <bonaparte-button class="ui button marginless">
      Menu 4
      <i class="arrow-drop-up icon right"></i>
    </bonaparte-button>
  </bonaparte-dropdown>