P11 Blazor UI Library – Bootstrap 5.3 Components

P11Dropdown Component

The P11Dropdown component provides a flexible and accessible dropdown panel that can be positioned around any trigger element. It supports 9 different alignment options and can contain any custom content.

Note: This component uses pure Blazor without JavaScript dependencies. All dropdown panels automatically receive unique z-index values to prevent overlapping issues.

Examples

The P11Dropdown component can be positioned in 9 different ways around the trigger element. Each dropdown can contain any custom content including forms, menus, or complex layouts.

Top Positions

Bottom Positions

Side Positions

Advanced Examples

Implementation Details

<h2 class="mb-3">Examples</h2>
<p>
    The P11Dropdown component can be positioned in 9 different ways around the trigger element. Each dropdown can contain any custom content including forms, menus, or complex layouts.
</p>

<div class="d-flex flex-wrap gap-3 align-items-start p-4 bg-light rounded-3 mb-4">

    <!-- Top Positionen -->
    <div class="d-flex flex-column gap-2">
        <h6 class="text-muted mb-2">Top Positions</h6>
        <P11Dropdown @bind-IsOpen="_showTopStart" Alignment="DropdownAlignment.TopStart">
            <ChildContent>
                <button type="button" class="btn btn-outline-primary btn-sm" @onclick="() => _showTopStart = true">Top Start</button>
            </ChildContent>
            <DropdownContent>
                <div class="p-2">
                    <h6>Top Start Panel</h6>
                    <button type="button" class="btn btn-secondary btn-sm" @onclick="() => _showTopStart = false">Close</button>
                </div>
            </DropdownContent>
        </P11Dropdown>

        <P11Dropdown @bind-IsOpen="_showTopCenter" Alignment="DropdownAlignment.TopCenter">
            <ChildContent>
                <button type="button" class="btn btn-outline-primary btn-sm" @onclick="() => _showTopCenter = true">Top Center</button>
            </ChildContent>
            <DropdownContent>
                <div class="p-2">
                    <h6>Top Center Panel</h6>
                    <button type="button" class="btn btn-secondary btn-sm" @onclick="() => _showTopCenter = false">Close</button>
                </div>
            </DropdownContent>
        </P11Dropdown>

        <P11Dropdown @bind-IsOpen="_showTopEnd" Alignment="DropdownAlignment.TopEnd">
            <ChildContent>
                <button type="button" class="btn btn-outline-primary btn-sm" @onclick="() => _showTopEnd = true">Top End</button>
            </ChildContent>
            <DropdownContent>
                <div class="p-2">
                    <h6>Top End Panel</h6>
                    <button type="button" class="btn btn-secondary btn-sm" @onclick="() => _showTopEnd = false">Close</button>
                </div>
            </DropdownContent>
        </P11Dropdown>
    </div>

    <!-- Bottom Positionen -->
    <div class="d-flex flex-column gap-2">
        <h6 class="text-muted mb-2">Bottom Positions</h6>
        <P11Dropdown @bind-IsOpen="_showBottomStart" Alignment="DropdownAlignment.BottomStart">
            <ChildContent>
                <button type="button" class="btn btn-outline-success btn-sm" @onclick="() => _showBottomStart = true">Bottom Start</button>
            </ChildContent>
            <DropdownContent>
                <div class="p-2">
                    <h6>Bottom Start Panel</h6>
                    <button type="button" class="btn btn-secondary btn-sm" @onclick="() => _showBottomStart = false">Close</button>
                </div>
            </DropdownContent>
        </P11Dropdown>

        <P11Dropdown @bind-IsOpen="_showBottomCenter" Alignment="DropdownAlignment.BottomCenter">
            <ChildContent>
                <button type="button" class="btn btn-outline-success btn-sm" @onclick="() => _showBottomCenter = true">Bottom Center</button>
            </ChildContent>
            <DropdownContent>
                <div class="p-2">
                    <h6>Bottom Center Panel</h6>
                    <button type="button" class="btn btn-secondary btn-sm" @onclick="() => _showBottomCenter = false">Close</button>
                </div>
            </DropdownContent>
        </P11Dropdown>

        <P11Dropdown @bind-IsOpen="_showBottomEnd" Alignment="DropdownAlignment.BottomEnd">
            <ChildContent>
                <button type="button" class="btn btn-outline-success btn-sm" @onclick="() => _showBottomEnd = true">Bottom End</button>
            </ChildContent>
            <DropdownContent>
                <div class="p-2">
                    <h6>Bottom End Panel</h6>
                    <button type="button" class="btn btn-secondary btn-sm" @onclick="() => _showBottomEnd = false">Close</button>
                </div>
            </DropdownContent>
        </P11Dropdown>

        <P11Dropdown @bind-IsOpen="_showBottom" Alignment="DropdownAlignment.Bottom">
            <ChildContent>
                <button type="button" class="btn btn-outline-success btn-sm" @onclick="() => _showBottom = true">Bottom Full</button>
            </ChildContent>
            <DropdownContent>
                <div class="p-2">
                    <h6>Bottom Full Width</h6>
                    <button type="button" class="btn btn-secondary btn-sm" @onclick="() => _showBottom = false">Close</button>
                </div>
            </DropdownContent>
        </P11Dropdown>
    </div>

    <!-- Seiten Positionen -->
    <div class="d-flex flex-column gap-2">
        <h6 class="text-muted mb-2">Side Positions</h6>
        <P11Dropdown @bind-IsOpen="_showLeft" Alignment="DropdownAlignment.Left">
            <ChildContent>
                <button type="button" class="btn btn-outline-info btn-sm" @onclick="() => _showLeft = true">Left Side</button>
            </ChildContent>
            <DropdownContent>
                <div class="p-2">
                    <h6>Left Panel</h6>
                    <button type="button" class="btn btn-secondary btn-sm" @onclick="() => _showLeft = false">Close</button>
                </div>
            </DropdownContent>
        </P11Dropdown>

        <P11Dropdown @bind-IsOpen="_showRight" Alignment="DropdownAlignment.Right">
            <ChildContent>
                <button type="button" class="btn btn-outline-info btn-sm" @onclick="() => _showRight = true">Right Side</button>
            </ChildContent>
            <DropdownContent>
                <div class="p-2">
                    <h6>Right Panel</h6>
                    <button type="button" class="btn btn-secondary btn-sm" @onclick="() => _showRight = false">Close</button>
                </div>
            </DropdownContent>
        </P11Dropdown>
    </div>

    <!-- Advanced Examples -->
    <div class="d-flex flex-column gap-2">
        <h6 class="text-muted mb-2">Advanced Examples</h6>
        <P11Dropdown @bind-IsOpen="_showMenu2" CloseOnOutsideClick="false" Alignment="DropdownAlignment.BottomEnd">
            <ChildContent>
                <button type="button" class="btn btn-secondary btn-sm" @onclick="() => _showMenu2 = true">Settings</button>
            </ChildContent>
            <DropdownContent>
                <button type="button" class="dropdown-item">Profil</button>
                <button type="button" class="dropdown-item text-danger" @onclick="() => _showMenu2 = false">Close</button>
            </DropdownContent>
        </P11Dropdown>

        <P11Dropdown @bind-IsOpen="_showMenu" Alignment="DropdownAlignment.BottomStart">
            <ChildContent>
                <button type="button" class="btn btn-secondary btn-sm" @onclick="() => _showMenu = true">Menu</button>
            </ChildContent>
            <DropdownContent>
                <button type="button" class="dropdown-item">Option 1</button>
                <button type="button" class="dropdown-item">Option 2</button>
                <button type="button" class="dropdown-item" @onclick="() => _showMenu = false">Close</button>
            </DropdownContent>
        </P11Dropdown>

        <div class="d-flex align-items-center">
                <P11Dropdown @bind-IsOpen="_showUniversalAccess"
                    Alignment="DropdownAlignment.BottomEnd"
                    StylePanel="margin-top: -10px;"
                    CssClassPanel="bg-warning"
                    AriaLabel="User settings and quick access">
                <ChildContent>
                    <P11Button OnClick="() => _showUniversalAccess = true"
                        IconClass="bi bi-card-checklist"
                        AriaLabel="Open checklist"
                        Title="Open checklist"
                        ButtonVariant="ButtonVariant.None" />
                </ChildContent>
                <DropdownContent>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0 text-muted">User avatar and alias</h6>
                        <button type="button"
                                class="btn-close"
                                @onclick="() => _showUniversalAccess = false"
                                aria-label="Close panel"
                                title="Close panel">
                        </button>
                    </div>
                    <hr class="my-2">
                    <span>THIS IS JUST A PANEL</span>
                    <hr class="my-2">
                    <P11Button Text="Close Menu"
                               OnClick="() => _showUniversalAccess = false"
                               ButtonVariant="ButtonVariant.Secondary" />
                </DropdownContent>
            </P11Dropdown>
        </div>
    </div>
</div>

@code {
    // Top Positionen
    private bool _showTopStart = false;
    private bool _showTopCenter = false;
    private bool _showTopEnd = false;

    // Bottom Positionen
    private bool _showBottomStart = false;
    private bool _showBottomCenter = false;
    private bool _showBottomEnd = false;
    private bool _showBottom = false;

    // Seiten Positionen
    private bool _showLeft = false;
    private bool _showRight = false;

    // Original Beispiele
    private bool _showUniversalAccess = false;
    private bool _showMenu = false;
    private bool _showMenu2 = false;
}

Component API

Parameter	Type	Default	Description
`@bind-IsOpen` Required	`bool`	-	Two-way binding for the dropdown open/closed state.
`ChildContent` Required	`RenderFragment`	-	The trigger element that opens the dropdown (usually a button).
`DropdownContent` Required	`RenderFragment`	-	The content displayed in the dropdown panel.
`Alignment`	`DropdownAlignment`	`BottomEnd`	Position of the dropdown panel relative to the trigger. Options: `TopStart, TopCenter, TopEnd, BottomStart, BottomCenter, BottomEnd, Bottom, Left, Right`
`CloseOnOutsideClick`	`bool`	`true`	Whether the dropdown should close when clicking outside of it.
`MinWidth`	`string`	`"250px"`	Minimum width of the dropdown panel.
`AriaLabel`	`string`	`"Dropdown panel"`	Accessibility label for screen readers.
`CssClass`	`string?`	`null`	Additional CSS classes for the dropdown container.
`CssClassPanel`	`string?`	`null`	Additional CSS classes for the dropdown panel container.
`StylePanel`	`string?`	`null`	Additional style for the dropdown panel container.
`AdditionalAttributes`	`Dictionary<string, object>`	`new()`	Captures all unmatched attributes to pass to the dropdown container.

DropdownAlignment Enum

Value	Description
`TopStart`	Panel appears above the trigger, aligned to the left
`TopCenter`	Panel appears above the trigger, centered
`TopEnd`	Panel appears above the trigger, aligned to the right
`BottomStart`	Panel appears below the trigger, aligned to the left
`BottomCenter`	Panel appears below the trigger, centered
`BottomEnd`	Panel appears below the trigger, aligned to the right
`Bottom`	Panel appears below the trigger, full width
`Left`	Panel appears to the left of the trigger
`Right`	Panel appears to the right of the trigger