Utilizing Paragraphs to Build Visual Menus

Aug 26, 2017

Jonathan Ferreira

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.


Hi! I'm Karim Boudjema, the developer and site-builder of this site. I'm currently working as a freelance Drupal developer.

I was wondering how could I giving back to the Drupal community all what it gave to me during the last 10 years, that's how the idea of this site came to me ... (read more)

Hi! I’m Santiago Rico, the web designer and themer of this site.

When Karim proposed me to design and theme this site for the Drupal community, I accepted immediately because the community is the main reason why I love Drupal so much.