Add support for dropdown items inside the BitToolbar component, following the Bootstrap Italia specification for Toolbar con Dropdown.
This feature allows toolbar items to render as dropdown buttons with a contextual submenu instead of plain links. It should work across all three toolbar sizes (large, medium, small) and support the full set of item states (active, disabled, badge).
Requirements:
- Add a
BitToolbarDropdownItem component (or extend BitToolbarItem) that renders a <div class="dropdown"> wrapping a <button class="btn btn-dropdown dropdown-toggle"> as the trigger
- The trigger button must carry the required Bootstrap Italia attributes:
data-bs-toggle="dropdown", aria-haspopup="true", aria-expanded="false", and a title parameter
- Render the dropdown menu as a
<div class="dropdown-menu"> containing a <div class="link-list-wrapper"><ul class="link-list"> with <a class="dropdown-item list-item"> entries
- Support all three toolbar size variants (default /
.toolbar-medium / .toolbar-small) — icon and label visibility follows the same rules as regular toolbar items
- Support the
active state on the trigger button (adds .active class)
- Support the
disabled state on the trigger button (adds .disabled + aria-disabled="true")
- Support optional badge on the dropdown trigger (same
badge-wrapper + toolbar-badge pattern as regular items)
- Support the "more actions" variant via a
toolbar-more class on the trigger button (uses the it-more-actions icon)
- Expose the dropdown items list as a
RenderFragment or child-content parameter
- Ensure correct ARIA:
aria-labelledby on the dropdown menu pointing to the button id
Acceptance Criteria:
- Add tests
- Add documentation
- Dropdown toolbar items render correctly for all three size variants (large, medium, small)
- Active and disabled states are correctly reflected in both CSS classes and ARIA attributes
- Badge integration works on dropdown triggers (numeric for large, dot for medium/small)
- Keyboard navigation follows Bootstrap Italia / WAI-ARIA menu button pattern (Enter/Space to open, Arrow keys to navigate items, Escape to close)
- Focus is returned to the trigger button after closing the dropdown via keyboard
- A story file is added for each size variant and state combination
References
Add support for dropdown items inside the
BitToolbarcomponent, following the Bootstrap Italia specification for Toolbar con Dropdown.This feature allows toolbar items to render as dropdown buttons with a contextual submenu instead of plain links. It should work across all three toolbar sizes (large, medium, small) and support the full set of item states (active, disabled, badge).
Requirements:
BitToolbarDropdownItemcomponent (or extendBitToolbarItem) that renders a<div class="dropdown">wrapping a<button class="btn btn-dropdown dropdown-toggle">as the triggerdata-bs-toggle="dropdown",aria-haspopup="true",aria-expanded="false", and atitleparameter<div class="dropdown-menu">containing a<div class="link-list-wrapper"><ul class="link-list">with<a class="dropdown-item list-item">entries.toolbar-medium/.toolbar-small) — icon and label visibility follows the same rules as regular toolbar itemsactivestate on the trigger button (adds.activeclass)disabledstate on the trigger button (adds.disabled+aria-disabled="true")badge-wrapper+toolbar-badgepattern as regular items)toolbar-moreclass on the trigger button (uses theit-more-actionsicon)RenderFragmentor child-content parameteraria-labelledbyon the dropdown menu pointing to the buttonidAcceptance Criteria:
References