Taxonomy Component for Canvas

Problem/Motivation

We need to develop a new Taxonomy Component that integrates seamlessly with Drupal taxonomy terms and is fully compatible with Drupal Canvas and Bootstrap 5 standards.

The component should provide a flexible and reusable way to display taxonomy terms (categories, tags, topics, etc.) with configurable styles and layout options.

This component will be used across listing pages, article pages, landing sections, and filter-based layouts where taxonomy visibility and styling consistency are required.

Key requirements:

• Bootstrap 5 compatible structure and utility classes
• Full Drupal taxonomy integration
• Canvas-supported configuration
• Configurable layout (inline, stacked, wrapped)
• Style options (badge style, outlined, minimal)
• Responsive behavior across all breakpoints
• No inline CSS/JS (SCSS-based styling only)

Steps to reproduce

1. Add the Taxonomy Component in Drupal Canvas.
2. Select taxonomy vocabulary or configure taxonomy source.
3. Choose display style (badge, outline, minimal, etc.).
4. Configure layout options (inline, wrap, stacked).
5. Verify responsive behavior across desktop, tablet, and mobile.

The component should render taxonomy terms consistently and follow Bootstrap spacing and alignment utilities.

Proposed resolution

• Develop a new Taxonomy Component following Bootstrap 5 standards.
• Implement Drupal taxonomy term rendering support.
• Add configurable display styles (badge, outline, minimal).
• Provide layout options for inline and wrapped display.
• Ensure responsive behavior using Bootstrap utilities.
• Move all styling to SCSS and remove inline CSS/JS.
• Ensure Canvas schema compatibility and clean architecture.

The Taxonomy Component will provide a consistent, reusable, and scalable way to display taxonomy terms across the site while aligning with Varbase and Bootstrap 5 architecture standards.

Remaining tasks

• ✅ File an issue about this project
• ❌ Addition/Change/Update/Fix to this project
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ❌ Code review from 1 Varbase core team member
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Update Release Notes
• ❌ Release

Varbase update type

• ✅ No Update
• ➖ Optional Update
• ➖ Forced Update
• ➖ Forced Update if Unchanged

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• N/A