How to use the Roadmap with Tabs shortcode

The standard Roadmap shortcode might not be the best UI for your users, especially if you’re showing all 6 Idea statuses, as having 6 columns of data can get pretty cumbersome on smaller devices.

That’s why we also have the Roadmap Tabs shortcode, which displays a horizontal tab bar consisting of your selected statuses, and clicking a tab displays the relevant ideas below. This can be a much more responsive solution than the standard Roadmap shortcode.

Ideas have 5 possible statuses, Closed, Maybe, New Idea, Up Next and On Roadmap. You can display a grid of ideas and choose which of these statuses to display ideas from using the Roadmap Tabs shortcode.

Shortcode:

[roadmap_tabs status="closed"] or maybe [roadmap_tabs status="maybe, up next, on roadmap"]

Add that shortcode wherever you want to display your roadmap, and add the statuses that you want to display in the status attribute, separated by commas.

Frontend:

Here’s an example of what it might look like on the frontend:

Colors of the tab container, tab backgrounds and tab text color can be modified in RoadMap > Settings