Skip to main content
profile image
Live Updates

Utilizing Paragraphs to Build Visual Menus

Design & Front-end
Jonathan Ferreira
Audience Experience Level
Drupal Beginner

Sometimes when developing sites for clients or for your own personal enjoyment having a simple text navigation isn’t enough. A navigation can become much more than words indicating where it will take a user. It can become a visual focal point on a website that not only allows users to find their way around but also encourages them to want too.

A visual menu can be thought of as a functional hero image, something that users can interact with as well as visually digest. They’re quick to build and using the Paragraphs module developers can easily create these types of menus. Paragraphs is a dynamic tool as is and leveraging it’s easy to use UI and a sprinkle of CSS developers can provide admin users a way to manage and build visual menus with as many or as little items as they see fit.

Although Paragraphs is typically used for dynamic content on nodes it can also be used in an unorthodox way. I hope to share how I approached the idea and implemented it on a Drupal 8 site using a combination of the Paragraphs module and the power of CSS. From the site building process to the code snippets that style various menus, audience members will see truly how easy it is to implement visual menus themselves on future projects. From this session members of the Drupal community can take away a new approach to provide user friendly editing experiences while also providing an engaging visual experience for end-users.