About

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

Example

Attributes

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

New Open

File one File two File three File four

Open Recent Label Exit

Menu 1 Item 2 Item 3

Content Header

A description which may flow for several lines and give context to the content.

Content Header

A description which may flow for several lines and give context to the content.

Content Header

A description which may flow for several lines and give context to the content.

Image Search

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>