Dropdowns

Based on Bootstrap button.

Single button

Action Another action Something else here 

<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-bs-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>
Action Another action Something else here 

<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-bs-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>
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 

<!-- 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-bs-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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 

<!-- 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-bs-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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 

<!-- 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-bs-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-bs-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-bs-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-bs-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

Action Another action Something else here
Action Another action Something else here
Action Another action Something else here 

<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-bs-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-bs-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-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="visually-hidden">Split right</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Menu Items

Dropdown Header
Action Active action Disabled action
Dropdown Item Text Something else here 

<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-bs-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

Action Active action Disabled action 

<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-bs-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-end" 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

Some example text that's free-flowing within the dropdown menu.

And this is more example text. 


<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-bs-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>
New around here? Sign up Forgot password? 

    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-bs-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="mb-3">
                <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="mb-3">
                <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="mb-3 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>