At a glance

A dropdown component that emits a Bootstrap 5 toggle button plus its <ul class="dropdown-menu">. Add menu items, set the button style, then read the HTML property.

Component class

TsgcHTMLComponent_Dropdown

Renders

Bootstrap 5 dropdown button + menu

Family

Navigation & Structure

Languages

Delphi, C++ Builder, .NET

QuickStart

Create it, add items, render it

Set ButtonText and ButtonStyleEnum, add link / header / divider items, then read HTML (or drop it into a TsgcHTMLTemplate_Bootstrap page).

uses
  sgcHTML_Enums, sgcHTML_Component_Dropdown;

var
  oDropdown: TsgcHTMLComponent_Dropdown;
  oItem: TsgcHTMLDropdownItem;
begin
  oDropdown := TsgcHTMLComponent_Dropdown.Create(nil);
  try
    oDropdown.ButtonText := 'Account';
    oDropdown.ButtonStyleEnum := bsPrimary;

    oItem := oDropdown.Items.Add;
    oItem.Text := 'Settings';
    oItem.Header := True;

    oItem := oDropdown.Items.Add;
    oItem.Text := 'Profile';
    oItem.Href := '/profile';

    oItem := oDropdown.Items.Add;
    oItem.Divider := True;

    oItem := oDropdown.Items.Add;
    oItem.Text := 'Sign out';
    oItem.Href := '/logout';

    WebModule.Response := oDropdown.HTML;   // Bootstrap dropdown
  finally
    oDropdown.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Dropdown.hpp

TsgcHTMLComponent_Dropdown *oDropdown = new TsgcHTMLComponent_Dropdown(NULL);
try
{
  oDropdown->ButtonText = "Account";
  oDropdown->ButtonStyleEnum = bsPrimary;

  TsgcHTMLDropdownItem *oItem = oDropdown->Items->Add();
  oItem->Text = "Settings";
  oItem->Header = true;

  oItem = oDropdown->Items->Add();
  oItem->Text = "Profile";
  oItem->Href = "/profile";

  oItem = oDropdown->Items->Add();
  oItem->Divider = true;

  oItem = oDropdown->Items->Add();
  oItem->Text = "Sign out";
  oItem->Href = "/logout";

  String html = oDropdown->HTML;   // Bootstrap dropdown
}
__finally
{
  delete oDropdown;
}

using esegece.sgcWebSockets;

var dropdown = new TsgcHTMLComponent_Dropdown();
dropdown.ButtonText = "Account";
dropdown.ButtonStyleEnum = TsgcHTMLButtonStyle.bsPrimary;

var item = dropdown.Items.Add();
item.Text = "Settings";
item.Header = true;

item = dropdown.Items.Add();
item.Text = "Profile";
item.Href = "/profile";

item = dropdown.Items.Add();
item.Divider = true;

item = dropdown.Items.Add();
item.Text = "Sign out";
item.Href = "/logout";

string html = dropdown.HTML;   // Bootstrap dropdown

Reference

Key properties & methods

The members you reach for most often.

Items

Items is the TsgcHTMLDropdownItems collection; Items.Add returns a TsgcHTMLDropdownItem with Text, Href, Disabled and the Header / Divider flags.

Item kinds

Set Header for a section label, Divider for a separator line, or leave both off for a plain link entry; Disabled greys an entry out.

Button

ButtonText is the toggle caption; ButtonStyleEnum (a TsgcHTMLButtonStyle such as bsPrimary) selects the variant, and ButtonClass overrides it with raw classes.

Split

Split renders the toggle as a separate caret button alongside the main action button.

Output

HTML returns the dropdown wrapper, toggle button and menu and DropdownID sets its element id — serve it, or assign it to a page template's BodyContent.

Resources

Keep exploring

	All sgcHTML ComponentsBrowse the full feature matrix of 60+ components.	Open
	Download Free TrialThe 30-day trial ships the 60.HTML demo projects.	Open
	PricingSingle, Team and Site licenses with full source code.	Open

Dropdown

TsgcHTMLComponent_Dropdown