Modal Menu Bravo

overview

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:
Figma
Bricks
Gutenberg
Buy Frames
Back to library

Overview

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 Automaticcss.com.

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

Variables

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.
--column-padding
--link-spacing
--link-arrow-gap
--link-hover-arrow-gap
--link-color
--link-hover-color
--link-max-size
--link-min-size
--link-weight
--link-arrow-size
--link-arrow-opacity
--link-hover-style
--link-arrow-opacity-duration
--link-arrow-gap-duration
--link-arrow-color-duration
--link-transform-duration
--secondary-group-spacing
--secondary-item-spacing
--secondary-link-size
--secondary-link-color
--secondary-link-hover-color
--secondary-link-hover-style

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

FAQs

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