Dropdown Toggle Link Reference
Reference for Dropdown Toggle Link Reference in Web Framework References. Key properties: ID, Class, Text, Active.
Bootstrap 5 component. Add the component and configure its properties in the Inspector.
Inspector Property Groups
Dropdown Toggle Link Properties
| Property | Type | Details |
|---|---|---|
| ID | text | ID for the dropdown toggle. Sets the id for a dropdown toggle within navigation. This is often used by aria-labelledby or for scripting/testing selectors. Bootstrap docs: Dropdowns Attribute: id |
| Class | text | Extra classes for the dropdown toggle. Adds extra CSS classes to the dropdown toggle. Use it to apply utility classes for spacing, colors, or custom styling. Bootstrap docs: Dropdowns Attribute: class |
| Text | text | Supports dynamic option sources. |
| Active | boolean | Marks the item as active. Marks the component as active by applying an active state class. This is primarily a visual state and (depending on the component) can also affect ARIA attributes and keyboard behavior. Bootstrap docs: Active state |
| Disabled | boolean | Marks the item as disabled. Marks the component as disabled. This applies disabled styling and may set related attributes depending on the element type. Disabled items typically do not respond to clicks. Bootstrap docs: Disabled state |
| Action Toggle | droplist | Attribute: data-bs-toggle Options: None, Button, Dropdown, Collapse, Tab, List |
Text
| Property | Type | Details |
|---|---|---|
| Advanced | css_toggle | Advanced layout options. Advanced layout options provided by the rule. These typically map to Bootstrap utility classes (spacing, flex, display) to fine-tune layout. Bootstrap docs: Utilities API |
| Color | color_group | Options: text-primary, text-primary-emphasis, text-secondary, text-secondary-emphasis, text-success, text-success-emphasis |
| Text Opacity | range | |
| Align | button_group | Controls text alignment. Controls text alignment using Bootstrap text utilities. Applies classes like text-start , text-center , text-end , including responsive variants (e.g. text-md-center ). Bootstrap docs: Text utilities Options: text-start, text-center, text-end |
| Font Weight | button_group | Controls font weight. Controls font weight using Bootstrap font-weight utilities. Applies fw-light , fw-normal , fw-bold , etc. Bootstrap docs: Font weight Options: B, B+, N, L, L+ |
| Line Height | button_group | Controls line height. Controls line height using Bootstrap line-height utilities. Applies lh-1 , lh-sm , lh-base , or lh-lg . Bootstrap docs: Line height Options: 1, SM, BS, LG |
Appearance
| Property | Type | Details |
|---|---|---|
| Back Color | color_group | Options: text-bg-primary, bg-primary, bg-primary-subtle, text-bg-secondary, bg-secondary, bg-secondary-subtle |
| Back Opacity | range | Controls background opacity. Controls background opacity when using background color utilities. Applies classes like bg-opacity-25 , bg-opacity-50 , etc. Bootstrap docs: Background utilities |
| Width | range | Sets a Bootstrap width utility class. Sets a Bootstrap width utility class. Applies utilities like w-25 , w-50 , w-75 , w-100 , or w-auto . Bootstrap docs: Sizing |
| Height | range | Sets a Bootstrap height utility class. Sets a Bootstrap height utility class. Applies utilities like h-25 , h-50 , h-75 , h-100 , or h-auto . Bootstrap docs: Sizing |
| Opacity | range | Sets the opacity utility class. Sets an opacity utility class. Applies utilities such as opacity-25 , opacity-50 , opacity-75 , or opacity-100 . Bootstrap docs: Opacity |
| Shadow | droplist | Applies a Bootstrap shadow utility. Applies a Bootstrap shadow utility. Uses classes like shadow , shadow-sm , shadow-lg , or removes shadow with shadow-none . Bootstrap docs: Shadows Options: Default, None, Small, Regular, Large |
Spacing
| Property | Type | Details |
|---|---|---|
| Margin<br>&<br>Padding | spacing | |
| X Gutter | range | Horizontal gutter size. Sets the horizontal gutter (spacing between columns). Uses gx-* utilities to control the horizontal gutter size. Bootstrap docs: Gutters |
| Y Gutter | range | Vertical gutter size. Sets the vertical gutter (spacing between rows). Uses gy-* utilities to control the vertical gutter size. Bootstrap docs: Gutters |
Display
| Property | Type | Details |
|---|---|---|
| Hide on | button_group | Options: xs, sm, md, lg, xl, xxl |
| button_group | ||
| Visually Hidden | boolean | |
| Focusable | boolean |
Flex Item
| Property | Type | Details |
|---|---|---|
| Align Self | button_group | Options: , , , , |
| Order | range | |
| Grow | button_group | Options: flex-grow-1, flex-grow-0 |
| Shrink | button_group | Options: flex-shrink-1, flex-shrink-0 |