<Dropdown>
    <TriggerSlot>
        <Button>
            <span>Hoverable Dropdown</span>
            <Icon IsSmall IconClass="fa fa-angle-down"></Icon>
        </Button>
    </TriggerSlot>
    <MenuSlot>
        <DropdownItem>
            <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
        </DropdownItem>
        <DropdownDivider/>
        <DropdownItem Href="#"> This is a link</DropdownItem>
    </MenuSlot>
</Dropdown>

<Dropdown IsClickTrigger>
    <TriggerSlot>
        <Button>
            <span>Clickable Dropdown</span>
            <Icon IsSmall IconClass="fa fa-angle-down"></Icon>
        </Button>
    </TriggerSlot>
    <MenuSlot>
        <DropdownItem>
            <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
        </DropdownItem>
        <DropdownDivider/>
        <DropdownItem Href="#"> This is a link</DropdownItem>
    </MenuSlot>
</Dropdown>

<Dropdown IsRight>
    <TriggerSlot>
        <Button>
            <span>Hoverable IsRight</span>
            <Icon IsSmall IconClass="fa fa-angle-down"></Icon>
        </Button>
    </TriggerSlot>
    <MenuSlot>
        <DropdownItem>
            <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
        </DropdownItem>
        <DropdownDivider/>
        <DropdownItem Href="#"> This is a link</DropdownItem>
    </MenuSlot>
</Dropdown>

<Dropdown IsClickTrigger IsUp @ref="dd">
    <TriggerSlot>
        <Button>
            <span>Clickable IsUp</span>
            <Icon IsSmall IconClass="fa fa-angle-down"></Icon>
        </Button>
    </TriggerSlot>
    <MenuSlot>
        <DropdownItem>
            <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
        </DropdownItem>
        <DropdownDivider/>
        <DropdownItem >
            <Button @onclick="close">Close</Button>
        </DropdownItem>
    </MenuSlot>
</Dropdown>

@code{
    Dropdown dd;

    void close()
    {
        dd.Toggle();
    }

}