Dropdowns

Based on Bootstrap button.

Single button


<abp-dropdown>
    <abp-dropdown-button text="Dropdown button" />
    <abp-dropdown-menu>
        <abp-dropdown-item href="#">Action</abp-dropdown-item>
        <abp-dropdown-item href="#">Another action</abp-dropdown-item>
        <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
    </abp-dropdown-menu>
</abp-dropdown>

<div class="demo-area">
    <div class="btn-group">
       <button class="dropdown-toggle btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Processing..."><span>Dropdown button</span></button>
      <div class="dropdown-menu">
         <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <a href="#" class="dropdown-item">Something else here</a>
      </div>
    </div>
</div>

<abp-dropdown>
    <abp-dropdown-button button-type="Secondary" link="true" text="Dropdown button" />
    <abp-dropdown-menu>
        <abp-dropdown-item href="#">Action</abp-dropdown-item>
        <abp-dropdown-item href="#">Another action</abp-dropdown-item>
        <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
    </abp-dropdown-menu>
</abp-dropdown>

<div class="btn-group">
    <a class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-busy-text="Processing..." roles="button" href="#"><span>Dropdown button</span></a>
    <div class="dropdown-menu">
       <a href="#" class="dropdown-item">Action</a>
       <a href="#" class="dropdown-item">Another action</a>
       <a href="#" class="dropdown-item">Something else here</a>
    </div>
</div>

<!-- Example single danger button -->

<abp-dropdown>
    <abp-dropdown-button button-type="Danger" text="Dropdown button" />
    <abp-dropdown-menu>
        <abp-dropdown-item href="#">Action</abp-dropdown-item>
        <abp-dropdown-item href="#">Another action</abp-dropdown-item>
        <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
        <abp-dropdown-divider />
        <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
    </abp-dropdown-menu>
</abp-dropdown>

<!-- Example single danger button -->

<div class="btn-group">
    <button class="dropdown-toggle btn btn-danger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Processing..."><span>Dropdown button</span></button>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <a href="#" class="dropdown-item">Something else here</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
    </div>
</div>

Split button


<!-- Example single danger button -->

<abp-dropdown>
    <abp-dropdown-button button-type="Danger" dropdown-style="Split" text="Dropdown button" />
    <abp-dropdown-menu>
        <abp-dropdown-item href="#">Action</abp-dropdown-item>
        <abp-dropdown-item href="#">Another action</abp-dropdown-item>
        <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
        <abp-dropdown-divider />
        <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
    </abp-dropdown-menu>
</abp-dropdown>

<!-- Example single danger button -->

<div class="btn-group">
     <button class="btn btn-danger" type="button" data-busy-text="Processing..."><span>Dropdown button</span></button>
     <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle dropdown-toggle-split btn btn-danger" type="button" data-busy-text="Processing..."></button>
     <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item">Another action</a>
        <a href="#" class="dropdown-item">Something else here</a>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">Separated link</a>
     </div>
</div>

Split button


<!-- Example single danger button -->

<abp-dropdown>
    <abp-dropdown-button size="Large" button-type="Secondary" text="Large button" />
    <abp-dropdown-menu>
        ...
    </abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown>
    <abp-dropdown-button size="Large" button-type="Secondary" dropdown-style="Split" text="Large split button" />
    <abp-dropdown-menu>
        ...
    </abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown>
    <abp-dropdown-button size="Small" button-type="Secondary" text="Small button" />
    <abp-dropdown-menu>
        ...
    </abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown>
    <abp-dropdown-button size="Small" button-type="Secondary" dropdown-style="Split" text="Small split button" />
    <abp-dropdown-menu>
        ...
    </abp-dropdown-menu>
</abp-dropdown>

<!-- Large button groups (default and split) -->
        <div class="btn-group">
            <button class="dropdown-toggle btn btn-secondary btn-lg" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Processing..."><span>Large button</span></button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button class="btn btn-secondary btn-lg" type="button" data-busy-text="Processing..."><span>Large split button</span></button>
            <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle dropdown-toggle-split btn btn-secondary btn-lg" type="button" data-busy-text="Processing..."></button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button class="dropdown-toggle btn btn-secondary btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Processing..."><span>Small button</span></button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>
        <div class="btn-group">
            <button class="btn btn-secondary btn-sm" type="button" data-busy-text="Processing..."><span>Small split button</span></button>
            <button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle dropdown-toggle-split btn btn-secondary btn-sm" type="button" data-busy-text="Processing..."></button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">Action</a>
                <a href="#" class="dropdown-item">Another action</a>
                <a href="#" class="dropdown-item">Something else here</a>
                <div class="dropdown-divider"></div>
                <a href="#" class="dropdown-item">Separated link</a>
            </div>
        </div>

Directions


<abp-dropdown direction="Up">
    <abp-dropdown-button button-type="Secondary" text="Dropup" />
    <abp-dropdown-menu>
        ...
    </abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown direction="Right">
    <abp-dropdown-button button-type="Secondary" text="dropright" />
    <abp-dropdown-menu>
        ...
    </abp-dropdown-menu>
</abp-dropdown>
<abp-dropdown direction="Right">
    <abp-dropdown-button button-type="Secondary" dropdown-style="Split" text="Split right" />
    <abp-dropdown-menu>
        ...
    </abp-dropdown-menu>
</abp-dropdown>

<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>
<div class="btn-group dropright">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Split right</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Menu Items


<abp-dropdown>
    <abp-dropdown-button button-type="Secondary" text="Dropdown"/>
    <abp-dropdown-menu>
        <abp-dropdown-header>Dropdown Header</abp-dropdown-header>
        <abp-dropdown-item href="#">Action</abp-dropdown-item>
        <abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
        <abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
        <abp-dropdown-divider/>
        <abp-dropdown-item-text>Dropdown Item Text</abp-dropdown-item-text>
        <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
    </abp-dropdown-menu>
</abp-dropdown>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <h6 class="dropdown-header">Dropdown Header</h6>
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item active" href="#">Active action</a>
      <a class="dropdown-item disabled" href="#">Disabled action</a>
      <div class="dropdown-divider"></div>
      <span class="dropdown-item-text">Dropdown item text</span>
      <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Menu alignment


<abp-dropdown>
    <abp-dropdown-button button-type="Secondary" text="Right-aligned"/>
    <abp-dropdown-menu align="Right">
        <abp-dropdown-item href="#">Action</abp-dropdown-item>
        <abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
        <abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
    </abp-dropdown-menu>
</abp-dropdown>

<div class="btn-group">
        <button class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Processing..."><span>Right-aligned</span></button>
    <div>
    </div>
    <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(135px, 38px, 0px);">
        <a href="#" class="dropdown-item">Action</a>
        <a href="#" class="dropdown-item active">Active action</a>
        <a href="#" class="dropdown-item disabled">Disabled action</a>
    </div>
</div>

Custom Content


<abp-dropdown>
    <abp-dropdown-button button-type="Secondary" text="Dropdown With Only Text" />
    <abp-dropdown-menu class="p-4" style="max-width: 200px;">
        <p>
             Some example text that's free-flowing within the dropdown menu.
        </p>
        <p class="mb-0">
             And this is more example text.
        </p>
    </abp-dropdown-menu>
</abp-dropdown>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown With Only Text
  </button>
    <div class="dropdown-menu p-4" style="max-width: 200px;">
      <p>
        Some example text that's free-flowing within the dropdown menu.
      </p>
      <p class="mb-0">
        And this is more example text.
      </p>
  </div>
</div>

    public class DropdownsModel : PageModel
    {
        [Required]
        [DataType(DataType.EmailAddress)]
        [Display(Name = "Email Address")]
        public string EmailAddress { get; set; }

        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password{ get; set; }

        [Display(Name = "Remember Me")]
        public bool RememberMe{ get; set; }


        public void OnGet()
        {

        }
    }

<abp-dropdown >
    <abp-dropdown-button button-type="Secondary" text="Dropdown With Form"/>
    <abp-dropdown-menu>
        <form class="px-4 py-3">
            <abp-input asp-for="EmailAddress"></abp-input>
            <abp-input asp-for="Password"></abp-input>
            <abp-input asp-for="RememberMe"></abp-input>
            <abp-button button-type="Primary" text="Sign In" type="submit" />
        </form>
        <abp-dropdown-divider></abp-dropdown-divider>
        <abp-dropdown-item href="#">New around here? Sign up</abp-dropdown-item>
        <abp-dropdown-item href="#">Forgot password?</abp-dropdown-item>
    </abp-dropdown-menu>
</abp-dropdown>

<div class="btn-group">
    <button class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Processing..."><span>Dropdown With Form</span></button>
    <div></div>
    <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
        <form class="px-4 py-3" novalidate="novalidate">
            <div class="form-group">
                <label for="EmailAddress">Email Address</label>
                <input type="email" data-val="true" data-val-required="The Email Address field is required." id="EmailAddress" name="EmailAddress" value="" class="form-control input-validation-error" aria-describedby="EmailAddress-error">
                <span class="text-danger field-validation-error" data-valmsg-for="EmailAddress" data-valmsg-replace="true"><span id="EmailAddress-error" class="">The Email Address field is required.</span></span>
            </div>
            <div class="form-group">
                <label for="Password">Password</label>
                <input type="password" data-val="true" data-val-required="The Password field is required." id="Password" name="Password" class="form-control input-validation-error" aria-describedby="Password-error">
                <span class="text-danger field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true"><span id="Password-error" class="">The Password field is required.</span></span>
            </div>
            <div class="form-check">
                <input type="checkbox" data-val="true" data-val-required="The Remember Me field is required." id="RememberMe" name="RememberMe" value="true" class="form-check-input valid" aria-describedby="RememberMe-error">
                <label class="form-check-label" for="RememberMe">Remember Me</label>
            </div>
            <button type="submit" class="btn btn-primary" data-busy-text="Processing..."><span>Sign In</span></button>
            <input name="RememberMe" type="hidden" value="false">
        </form>
        <div class="dropdown-divider"></div>
        <a href="#" class="dropdown-item">New around here? Sign up</a>
        <a href="#" class="dropdown-item">Forgot password?</a>
    </div>
</div>