Design system website (config)

Vanilla docs - Configuring component page

On the Vanilla docs, there are now tabs on each component page to switch between content. The tabs are only visible if there is more than one page to show. The tab menu items include:

  • Implementation: Describing the implementation of a component
  • Accessibility: Describing the accessibility considerations of a component
  • Design guidelines: Describing the design guidelines of a component

To add tabs to a component documentation page, the first thing you need is the content.


Accessibility and Implementation content are stored in .md files inside the vanilla-framework repo. Create a folder for the component, inside create an file for the Accessibility content and an file for the Implementation content.

Technical tips:

  • The naming of the file is important, as the template finder relies on the file name to define the path (f.x. folder /docs/patterns/button/ will be the url /docs/patterns/button and /docs/patterns/button/ will be the url /docs/patterns/button/accessibility)
  • Files will not need any <h1> headlines, as the title metadata will be used for it. This was a compromise because we wanted the menu to show up under the title.

Design guidelines content is pulled from Discourse. Start by creating a new Discourse post with the design guidelines content of the component. Once done, add a new table entry inside the Navigation table at the bottom of this post, pointing to the new design guidelines post you created.

Once the content is done. Next step is updating the component_tabs.yaml file in the Vanilla framework repo.

Component tabs config

We have a .yaml file that defines the tab menu for each component.

patterns/button:  # unique identifier of the component
  accessibility: True  
  design_guidelines: True

If the component is missing from the file it will show no tab menu. The accessibility and design_guidelines properties reveal or hide the corresponding menu items.


The new Vanilla design system website fetches design guidelines from this category, based on the entries in the table below.

Level Path Navlink
0 patterns/how Heading
1 patterns/segmented-control Segmented control
0 patterns/index Heading linked
1 patterns/modular-table/intro Modular table
2 patterns/modular-table/cell Cells
3 patterns/modular-table/cell-dnd Cells drag and drop
3 patterns/modular-table/cell-icons Cell icons
2 patterns/modular-table/responsive Responsive tables
2 patterns/modular-table/grouping Grouping
3 patterns/modular-table/resizing Resizing
1 Like