Repository navigation
[FEATURE] Add Dropdown Support to BitToolbar Component #99
Copy link
Copy link
Closed
Labels
componentsIssues related to the componentsIssues related to the componentsenhancementNew feature or requestNew feature or request
Milestone
Description
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
BitToolbarDropdownItemcomponent (or extendBitToolbarItem) 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 atitleparameter - 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
activestate on the trigger button (adds.activeclass) - Support the
disabledstate on the trigger button (adds.disabled+aria-disabled="true") - Support optional badge on the dropdown trigger (same
badge-wrapper+toolbar-badgepattern as regular items) - Support the "more actions" variant via a
toolbar-moreclass on the trigger button (uses theit-more-actionsicon) - Expose the dropdown items list as a
RenderFragmentor child-content parameter - Ensure correct ARIA:
aria-labelledbyon the dropdown menu pointing to the buttonid
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
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
componentsIssues related to the componentsIssues related to the componentsenhancementNew feature or requestNew feature or request
Projects
- StatusShow more project fieldsDone
Activity
add dropdown item to toolbar (#99)
#99 - add tests for toolbar dropdown
#99 - add stories and sample for toolbard dropdown support
#99 - reafactor BitToolbarItem to inherit from a base class
#99 - update toolbar documentation
#99 - apply suggestions from review
#99 - fix documentation based on PR review
Add toolbar dropdown support (#107)