Demonstration of the theme's two column navigation menu.

Experimental project

This is a sandbox project, which contains experimental code for developer use only.

This theme is intended as a proof of concept for a USWDS based two column primary navigation menu.

The second column is generated by a script in js/two-col-menu.js, which looks for variables generated in menu--main.html.twig to break the menu on.

The twig variables are set to define columns after the 9th item, but future possibilities exist for tying the menu's configuration to theme settings.

To test:

  1. Get your drupal environment setup. Consider lando.
  2. Drag the uswds_theme folder into themes/custom.
  3. Cd into uswds_theme folder and npm install.
  4. Require and enable twig tweak module.
  5. Install theme and set to default.
  6. Npx gulp compile.
  7. Add at least 10 items to a parent in the main navigation.
  8. Open the parent menu item. The menu should break into two columns after the 9th item.

Project information