Angular Dropdowns

Dropdown (default)

Option 1 Option 2 Option 3 Option 4 
<mui-dropdown color="primary" label="dropdown">
  <mui-dropdown-item link="#/link1">Option 1</mui-dropdown-item>
  <mui-dropdown-item>Option 2</mui-dropdown-item>
  <mui-dropdown-item>Option 3</mui-dropdown-item>
  <mui-dropdown-item>Option 4</mui-dropdown-item>
</mui-dropdown>
View in new tab »

Menu Placement and Alignment

Option 1 Option 2
Option 1 Option 2
Option 1 Option 2
Option 1 Option 2
Option 1 Option 2
Option 1 Option 2
Option 1 Option 2
Option 1 Option 2 
<div>
  <!-- Placement: down, Alignment: left (default) -->
  <mui-dropdown color="primary" label="dropdown">
    <mui-dropdown-item>Option 1</mui-dropdown-item>
    <mui-dropdown-item>Option 2</mui-dropdown-item>
  </mui-dropdown>
</div>
<div>
  <!-- Placement: down, Alignment: right -->
  <mui-dropdown color="primary" label="dropdown (right aligned)" alignment="right">
    <mui-dropdown-item>Option 1</mui-dropdown-item>
    <mui-dropdown-item>Option 2</mui-dropdown-item>
  </mui-dropdown>
</div>
<div>
  <!-- Placement: up, Alignment: left -->
  <mui-dropdown color="primary" label="dropup" placement="up">
    <mui-dropdown-item>Option 1</mui-dropdown-item>
    <mui-dropdown-item>Option 2</mui-dropdown-item>
  </mui-dropdown>
</div>
<div>
  <!-- Placement: up, Alignment: right -->
  <mui-dropdown color="primary" label="dropup (right aligned)" placement="up" alignment="right">
    <mui-dropdown-item>Option 1</mui-dropdown-item>
    <mui-dropdown-item>Option 2</mui-dropdown-item>
  </mui-dropdown>
</div>
<div>
  <!-- Placement: right, Alignment: top -->
  <mui-dropdown color="primary" label="dropright" placement="right">
    <mui-dropdown-item>Option 1</mui-dropdown-item>
    <mui-dropdown-item>Option 2</mui-dropdown-item>
  </mui-dropdown>
</div>
<div>
  <!-- Placement: right, Alignment: bottom -->
  <mui-dropdown color="primary" label="dropright (bottom aligned)" placement="right" alignment="bottom">
    <mui-dropdown-item>Option 1</mui-dropdown-item>
    <mui-dropdown-item>Option 2</mui-dropdown-item>
  </mui-dropdown>
</div>
<div>
  <!-- Placement: left, Alignment: top -->
  <mui-dropdown color="primary" label="dropleft" placement="left">
    <mui-dropdown-item>Option 1</mui-dropdown-item>
    <mui-dropdown-item>Option 2</mui-dropdown-item>
  </mui-dropdown>
</div>
<div>
  <!-- Placement: left, Alignment: bottom -->
  <mui-dropdown color="primary" label="dropleft (bottom aligned)" placement="left" alignment="bottom">
    <mui-dropdown-item>Option 1</mui-dropdown-item>
    <mui-dropdown-item>Option 2</mui-dropdown-item>
  </mui-dropdown>
</div>
View in new tab »
« Previous Next »