Modal Menu Bravo


A full-screen modal menu for desktop and mobile inspired by the Automatic.css site menu.

Style Preview
Modal Menu Bravo
Modal Menu Bravo Styled
Available for:
Buy Frames
Back to library


What we build for ourselves, we hand down to you! In one click, you can now add the same modal menu to your sites that we built for

This menu features a vibrant full-screen effect with large main navigation text in the left column and smaller secondary navigation links organized into groups in the right column.

The oversized link text uses a max function for automatic responsiveness and users can easily set the maximum and minimum values for this text with locally scoped variables.

Speaking of locally scoped variables, all the most important aspects of the styling and spacing for this menu are controlled via easily adjustable locally scoped variables nested in the parent modal. This means all the most important elements can be styled from one spot – no digging around in accordion after accordion trying to find where a style is coming from!

This modal is built for desktop and mobile, so both applications are covered with just a few clicks of your mouse. Enjoy!

Query Loop Compatible


This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.

Accessibility Notes

Users need to take care to maintain proper ul/li structure. When removing or adding links, we suggest duplicating the list item elements. And place the query loop on a list item element when using a query loop.

Related Frames

No related frames.

Related Components


    Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.