Exploring this idea of making it really easy to create horizontal navigation list through code and through simple WYSIWYG tools. The demos below are me working through the idea and then deploying the code and implementing the WYSIWYG changes.

I have also added other list types to the WYSIWYG to allow simple addition of these list types as well…

Created with New Class

This method would involve adding a new class to the top level list element (<ul>) and then have all of the list items and links behave accordingly. This would make it easier to implement in the WYSIWYG editor and have it be used without having to have Webteam involved.

This colour scheme meets accessibility guidelines with the white, light grey and medium grey backgrounds. I have also built out dark mode versions that will not be in the WYSIWYG editor — see below…

This method required adding code to the SCSS/CSS code base and updates to the WYSIWYG editor configuration. 

Considering a dark-mode version

This would most likely be a manual process and not included in the WYSIWYG editor. Could be used in custom block to add to section footers etc.

This method required adding code to the SCSS/CSS code base and updates to the WYSIWYG editor configuration. 

Demonstrations of lists added through the WYSIWYG editor

Bare List through WYSIWYG

  • First Item
  • Item # 2
  • Third item
  • I'm number 4

Comma Separated List through WYSIWYG

  • First Item
  • Item # 2
  • Third item
  • I'm number 4

Horizontal Navigation List through WYSIWYG

Horizontal List through WYSIWYG

  • First Item
  • Item # 2
  • Third item
  • I'm number 4