Dropdown

An interactive Dropdown component for discoverable content.

API Documentation

How it works #

The Dropdown component displays a menu of actions or links that appears when triggered, providing a compact way to present options to users.

How to use:
  1. Add the Dropdown component to your page.
  2. Place your trigger element (such as a button) inside <DropdownTrigger>.
  3. Define the dropdown menu items inside <DropdownContent> using DropdownLinkItem for links and DropdownDivider for separators.
  4. Use the IsActive parameter on a DropdownLinkItem to highlight the active item if needed.
This demo shows the essential structure for a dropdown menu and how to organize its content for user interaction. 
<Dropdown>
    <DropdownTrigger>
        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
            <span>Dropdown button</span>
            <span class="icon is-small">
                <i class="bi bi-chevron-down" aria-hidden="true"></i>
            </span>
        </button>
    </DropdownTrigger>
    <DropdownContent>
        <DropdownLinkItem Href="#"> Dropdown item </DropdownLinkItem>
        <DropdownLinkItem Href="#"> Other dropdown item </DropdownLinkItem>
        <DropdownLinkItem Href="#" IsActive="true"> Active dropdown item </DropdownLinkItem>
        <DropdownLinkItem Href="#"> Other dropdown item </DropdownLinkItem>
        <DropdownDivider />
        <DropdownLinkItem Href="#"> With a divider </DropdownLinkItem>
    </DropdownContent>
</Dropdown>

Dropdown content #

The Dropdown menu supports any type of content, not just links, allowing for flexible layouts and custom markup.

How to use:
  1. Place any markup (such as paragraphs, divs, or custom components) inside <DropdownContent>.
  2. Use DropdownItem for custom content and DropdownLinkItem for navigational links.
  3. Insert DropdownDivider to visually separate groups of items.
This demo illustrates how to combine different content types within a dropdown for advanced scenarios. 
<Dropdown>
    <DropdownTrigger>
        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
            <span>Dropdown button</span>
            <span class="icon is-small">
                <i class="bi bi-chevron-down" aria-hidden="true"></i>
            </span>
        </button>
    </DropdownTrigger>
    <DropdownContent>
        <DropdownItem> 
            <p>
                You can insert <strong>any type of content</strong> within the
                dropdown menu.
            </p>
        </DropdownItem>
        <DropdownDivider />
        <DropdownItem> 
            <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
        </DropdownItem>
        <DropdownDivider />
        <DropdownLinkItem Href="#"> This is a link item </DropdownLinkItem>
    </DropdownContent>
</Dropdown>

Hoverable #

The Hoverable Dropdown opens automatically when the user hovers over the trigger, offering a seamless and interactive experience.

How to use:
  1. Add the Dropdown component and set IsHoverable="true".
  2. Place your trigger element inside <DropdownTrigger> and menu items inside <DropdownContent>.
  3. The dropdown will open on mouse hover without requiring a click.
This demo demonstrates how to enable hover-based activation for dropdown menus. 
<Dropdown IsHoverable="true">
    <DropdownTrigger>
        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
            <span>Dropdown button</span>
            <span class="icon is-small">
                <i class="bi bi-chevron-down" aria-hidden="true"></i>
            </span>
        </button>
    </DropdownTrigger>
    <DropdownContent>
        <DropdownItem>
            <p>
                You can insert <strong>any type of content</strong> within the
                dropdown menu.
            </p>
        </DropdownItem>
    </DropdownContent>
</Dropdown>

Right aligned #

The Right-aligned Dropdown positions the dropdown menu to the right edge of the trigger, useful for aligning menus in toolbars or layouts.

How to use:
  1. Add the Dropdown component and set IsRight="true" to align the menu to the right.
  2. Place your trigger and menu items as usual.
  3. By default, dropdowns are left-aligned; use IsRight for right alignment.
This demo shows how to control the alignment of dropdown menus for different UI needs. 
<Dropdown>
    <DropdownTrigger>
        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
            <span>Left aligned</span>
            <span class="icon is-small">
                <i class="bi bi-chevron-down" aria-hidden="true"></i>
            </span>
        </button>
    </DropdownTrigger>
    <DropdownContent>
        <DropdownItem>
            <p>The dropdown is <strong>left-aligned</strong> by default.</p>
        </DropdownItem>
    </DropdownContent>
</Dropdown>

<Dropdown IsRight="true">
    <DropdownTrigger>
        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
            <span>Right aligned</span>
            <span class="icon is-small">
                <i class="bi bi-chevron-down" aria-hidden="true"></i>
            </span>
        </button>
    </DropdownTrigger>
    <DropdownContent>
        <DropdownItem>
            <p>
                Add the <code>is-right</code> modifier for a
                <strong>right-aligned</strong> dropdown.
            </p>
        </DropdownItem>
    </DropdownContent>
</Dropdown>

Dropup #

The Dropup variant displays the dropdown menu above the trigger, ideal for use near the bottom of the viewport.

How to use:
  1. Add the Dropdown component and set IsUp="true".
  2. Place your trigger and menu items as usual.
  3. The dropdown menu will appear above the trigger button.
This demo demonstrates how to create a dropup menu for improved usability in certain layouts. 
<Dropdown IsUp="true">
    <DropdownTrigger>
        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
            <span>Dropup button</span>
            <span class="icon is-small">
                <i class="bi bi-chevron-up" aria-hidden="true"></i>
            </span>
        </button>
    </DropdownTrigger>
    <DropdownContent>
        <DropdownItem>
            <p>
                You can add the <code>is-up</code> modifier to have a dropdown menu
                that appears above the dropdown button.
            </p>
        </DropdownItem>
    </DropdownContent>
</Dropdown>

Icon only #

The Icon-only Dropdown uses an icon as the trigger, providing a compact and modern way to access menu actions.

How to use:
  1. Add the Dropdown component and set IsRight="true" if you want right alignment.
  2. Place an icon component (such as BootstrapIcon) inside <DropdownTrigger> to use it as the clickable element.
  3. Define your menu items inside <DropdownContent> as usual.
This demo shows how to implement a dropdown menu triggered by an icon for streamlined interfaces. 
<div style="justify-self: self-end;">
    <Dropdown IsRight="true">
        <DropdownTrigger>
            <BootstrapIcon Name="BootstrapIconName.ThreeDotsVertical" role="button" />
        </DropdownTrigger>
        <DropdownContent>
            <DropdownLinkItem Href="#"> Overview </DropdownLinkItem>
            <DropdownLinkItem Href="#"> Block </DropdownLinkItem>
            <DropdownLinkItem Href="#"> Box </DropdownLinkItem>
            <DropdownLinkItem Href="#"> Progress Bar </DropdownLinkItem>
            <DropdownLinkItem Href="#"> Pdf Viewer </DropdownLinkItem>
            <DropdownLinkItem Href="#"> Bootstrap Icons </DropdownLinkItem>
            <DropdownLinkItem Href="#"> Google Maps </DropdownLinkItem>
        </DropdownContent>
    </Dropdown>
</div>
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!