Blueprint UI

Selector: bp-dropdown

Inputs

Dropdown inputs
Input	Type	Description	Notes
triggerText	string	The text used in the dropdown trigger button.
triggerClasses	string	The classes used on the dropdown trigger button.
menuClasses	string	The classes used on the dropdown menu.	Often used to set menu alignment, e.g. "dropdown-menu-right"
hasCaret	boolean	Determines if the dropdown trigger has the caret.	Default is "true". When "true", the dropdown trigger has the caret.
dropDirection	string	The direction in which the menu should open.	Expects either "up", "down", "left", or "right". Default is "down".
iconTrigger	string	The font awesome icon class used to create an icon trigger.	When using iconTrigger, triggerText is visually hidden and used for screen readers.
dropdownItems	object[]	List of properties for creating the dropdown items.
bpID	string	The value for the dropdown's id attribute.	Ids must only be used once per page. Ids should be camelCase, e.g.: #myId. See identifiers.

Dropdown Items

The dropdown item will render either an anchor or a button depending on the properties. If either an href or bpRouterLink is provided, the action will be an anchor. If neither are provided, the action will be a button.

Headings, dividers and plain text can also be added by providing the either heading, isDivider, or plainText key:value pairs. Items render in the same order as in the dropdown items array.

Dropdown item properties
Input	Type	Description	Notes
text	string	The text used in the dropdown item.
ariaLabel	string	The text used as the aria label of the dropdown item.
action	string	A string to be emitted on click of the dropdown item.	Item can only have one of the following: bpRouterLink, href, or action.
href	string	The value for the dropdown item's href attribute.	Item can only have one of the following: bpRouterLink, href, or action.
bpRouterLink	string	The value for the dropdown item's routerLink attribute.	Item can only have one of the following: bpRouterLink, href, or action.
target	string	The target for the link.	For example, "_blank" opens in a new tab.
isDisabled	boolean	Determines if the dropdown item is disabled or enabled.	Default is "false". When "true" the dropdown item is disabled.
isDestructive	boolean	Determines if the dropdown item triggers a destructive action.	Default is "false". When "true" the dropdown item is destructive.
isActive	boolean	Determines if the dropdown item is active. This is used within the primary navigation for marking the active route.	Default is "false". When "true" the dropdown item is active.
lang	string	Specifies the value of the lang attribute on the dropdown item. This is primarily used in the language dropdown.
iconLeft	string	The Font Awesome icon class for an icon on the left of the dropdown item.	For example, "fa-external-link-alt" for an external link icon.
iconRight	string	The Font Awesome icon class for an icon on the right of the dropdown item.	For example, "fa-chevron-left" for a left facing chevron icon i.e. back link.
heading	string	Adds a heading item to the dropdown where the value is the heading text.	Should be the only property in the object aside from bpID.
plainText	string	Adds a plain text item to the dropdown where the value is the text.	Should be the only property in the object aside from bpID.
isDivider	boolean	Adds a divider to the dropdown.	Should be the only property in the object aside from bpID.
bpID	string	The value of the dropdown items id.

Outputs

Dropdown outputs
Output	Description
click	Emits an event on click of the dropdown item, if it is a button. It will emit the string provided in that item's action property.

Code

Dropdowns should be wrapped in a col-auto grid column.

<div class="col-auto">
  <bp-dropdown
    triggerText="Primary Dropdown"
    triggerClasses="btn-primary"
    dropDirection="up"
    [dropdownItems]="exampleItems"
  ></bp-dropdown>
</div>

Identifiers

Identifiers
ID	Description
`bpID`	The unique identifier for the dropdown component.
`bpID + 'DropdownToggle'`	The unique identifier for the dropdown toggle.
`bpID + 'Item' + #`	The unique identifier for the dropdown items. This can be overridden by providing a bpID to individual items object.