 |
Summary | Kanban Board allows you to display and organise topics using a kanban board interface. |
 |
Preview | Preview on Discourse Theme Creator |
 |
Repository Link | https://github.com/discourse/discourse-kanban-theme |
 |
New to Discourse Themes? | Beginnerâs guide to using Discourse Themes |
Install this theme component
Summary
The Kanban Board theme component transforms how you organize and visualize your forum topics. It provides a drag-and-drop interface that lets you move topics between different columns representing categories, tags, or user assignments, making it ideal for project management, workflow visualization, and content organization.
Features
Multiple organization modes
The Kanban Board offers three different modes to organize your topics:
- Categories mode: Organize topics by their assigned categories
- Tags mode: Organize topics by their assigned tags
- Assignment mode: Organize topics by the users theyâre assigned to
You can drag topics between lists to automatically change the corresponding attributes:
Performance optimized
Lists are âlazy-loaded,â which means the component only loads content as needed. This ensures reasonable performance even when dealing with large numbers of categories or topics.
Setup and configuration
Default board mode selection
The default board mode will be automatically determined using these criteria:
- If this is the top level, use categories mode
- If this is a category, and there are sub-categories, use categories mode
- Otherwise, use tags mode. (Lists built from âtop tagsâ list)
Changing the board mode
You can change the board mode using the filter button on the left, and configuration changes will be reflected in the URL. Users can bookmark their favorite configuration in their browser.
Settings
Site administrators can customize the default settings of the theme component through the themeâs settings:
| Setting | Description |
|---|---|
| Display categories | A list of categories where the âBoardâ button should appear. If left blank, it will be shown everywhere. Use @ to denote the top level view. |
| Default modes | Override the default board mode for each category. Use the syntax category:mode:params. For example, support:assigned:david,sam,joffrey. Use @ to denote the top level view. Use @untagged to display an untagged column. |
| Default view | A list of categories where the âBoardâ is the default view. (Note: Does not yet support the top level default view) |
| Require confirmation | Display a confirmation modal before making changes to a topicâs tags/category |
| Show tags | Show tags on topic cards |
| Card style | Determine the visual style of topic cards (currently âdetailedâ is available) |
| Show topic thumbnail | Display the topic thumbnail at the bottom of the card |
| Show activity indicators | Display an indicator of a cardâs activity. Different styles will be applied if the topic has been bumped more than 7 days ago or more than 20 days ago |
Defaults for each setting are shown below:
Text customizations
Administrators can customize the text labels used throughout the Kanban board interface. The following text elements can be customized:
| Translation | Default | Description |
|---|---|---|
| no_topics | no topics | Displayed when a column has no topics |
| confirm_change_tags | Remove â#%{remove}â and add â#%{add}â to â%{title}â? | Confirmation message when changing tags |
| confirm_close | Close topic â%{title}â? | Confirmation when closing a topic |
| confirm_open | Reopen topic â%{title}â? | Confirmation when reopening a topic |
| confirm_change_category | Move topic â%{title}â? | Confirmation when changing a topicâs category |
| menu_label | Board | Text for the board navigation menu item |
| copy_link | Copy link to clipboard | Tooltip for copying a link |
| configure | Configure kanban board | Text for configuration button |
| fullscreen | Toggle fullscreen | Text for fullscreen toggle button |
| no_lists | No Kanban lists configured⌠| Shown when no lists are configured |
| controls | Kanban Board Controls | Header for controls section |
| last_post_by | Last post by | Label for last poster information |
| modal.title | Configure Kanban | Title of configuration modal |
| modal.tags_placeholder | Tags to display⌠| Placeholder for tags input field |
| modal.categories_placeholder | Categories to display⌠| Placeholder for categories input field |
| modal.usernames_placeholder | Users to display⌠| Placeholder for users input field |
| modal.apply | Apply | Text for apply button |
| modal.mode | Board Mode | Label for board mode selector |
| modal.lists | Lists | Label for lists configuration section |
Tips for effective use
Setting up tag columns
For the most intuitive setup in tags mode, organize your tags in a tag group with âonly one tag from this groupâ enabled. This ensures topics can only have one status tag, making the kanban board function like a traditional workflow board.
Controlling column order in tags mode
You can specify the exact order of columns using the default modes setting. For example, specifying roadmap:tags:discovery,design,build,testing will display columns in that specific order:
Frequently asked questions
Can I use the kanban board on mobile devices?
The drag-and-drop functionality currently doesnât work on mobile devices because they donât support HTML5 drag and drop. You can still view the board on mobile, but you wonât be able to move cards between columns.
Why does the board tab disappear after I set it up?
If the board tab disappears after initial configuration, you may need to ensure youâve correctly entered the category names in the theme settings. Be sure to use the exact category slug (with underscores rather than dashes if applicable) and configure both parent categories and subcategories separately.
How do I limit which tags are shown site-wide?
You can configure which tags appear in the tags mode using the default modes setting. Specify exactly which tags should appear as columns to prevent all tags from showing up.
How do I change the card appearance?
You can customize the appearance of cards using several settings:
- Use the âCard styleâ setting to select the display format
- Enable or disable tags on cards with the âShow tagsâ option
- Add thumbnails to cards with âShow topic thumbnailâ setting
- Add visual activity indicators with âShow activity indicatorsâ setting
pr-welcome features:
-
make the lists more configurable. e.g. allow administrators to define a combination of assignment, tags, and categories in one display
-
Add support for dragging cards on mobile devices. Unfortunately, they donât support html drag and drop
Last edited by @SaraDev 2025-06-02T22:44:54Z
Check document
Perform check on document: