Menu Section Alpha

overview

A minimalist restaurant menu section with optional featured menu items.

Menu Section Alpha
Available for:
Figma
Bricks
Gutenberg
Buy Frames
Back to library

Overview

Menu Section Alpha is a fantastic restaurant menu that can work well for any restaurant style.

A unique feature, which required a ton of work and planning, is the ability to have “featured” menu items. When a menu item is featured, it gets a boxed layout style with an attached badge. The badge text is customizable via a data attribute.

Special care was taken to ensure that the boxed layout style on featured menu items doesn’t interfere with or change the height of other menu items in the grid.

Additionally, we took steps to ensure you can mark items as featured, even when querying the items in a loop.

While this looks like a simple menu, it’s a very advanced frame. We’ve included many locally scoped variables to help you make adjustments without needing to understand the complex CSS.

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.
--row-gap

Size of the grid row gap

--col-gap

Size of the grid col gap

--featured-box-background

Background color when a menu item is featured

--featured-box-border-width

Border width of featured menu item

--featured-box-border-color

Border color of featured menu item

--featured-box-offset

Virtual padding for featured menu item

--featured-box-offset-top-adjustment

Extra virtual top padding for featured menu item (for label overlap)

--featured-box-radius

Border radius of the featured menu item

--featured-label-height

Height of the featured menu item's badge

--featured-label-nudge

Granular y-axis position control for perfect centering of badge

--featured-label-background

Background of the featured menu item's badge

--featured-label-text-color

Text color of the featured menu item's badge

--featured-label-font-size

Font size of the featured menu item's badge

--featured-label-inline-padding

X-axis padding of the featured menu item's badge

--featured-label-radius

Border raidus of the featured menu item's badge

--line-style

Style of the connector line between heading & price

--line-color

Color of the connector line between heading & price

--line-nudge

Granular y-axis position control for perfect alignment of connector line

HTML5 Tags & Attributes

Accessibility Notes

No additional accessibility notes for this frame.

FAQs

How do I make a menu item featured?

Add a data attribute called “data-featured-text” to feature a menu item and set its value to your desired featured badge text.

How do I feature a menu item when using a query loop?

To use the featured menu item functionality in a query loop, create a custom field for your featured item text and assign it to your menu items custom post type. You must then dynamically pass that text input value into the “data-featured-text” attribute value. Once you do that, any menu item with featured text will appear as featured in the menu.

Why are there "row-gap" and "col-gap" variables?

To support featured menu items, the grid must have row gaps equal to your preferred gap plus the size of a featured menu item:

gap: calc(var(--row-gap) + var(--featured-box-offset)) var(--col-gap);

For this reason, you should not use the “gap” input in Bricks. Instead, use the locally scoped variables on the grid for row-gap and col-gap, which allow you to set your preferred gap while automatically adding the necessary offset for featured items.

Why is the featured item box offset set on the Menu Grid Alpha and not Menu Card Alpha?

Menu Grid Alpha needs to know the size of --feature-box-offset. Therefore, we had to create that variable at the grid level. All other featured item styling variables are contained within the menu cards.

What does --featured-label-nudge do?

We can’t perfectly center the featured menu item badge vertically because there’s a slight shift depending on the font size values you’ve set. Therefore, we added --featured-label-nudge to allow you to “nudge” the badge up or down to ensure it’s centered perfectly.

Why can’t I see styling attached to data attributes in Bricks Builder?

Bricks Builder currently doesn’t support visual styling or behavior changes related to data attributes inside the builder. All styling and behaviors associated with data attributes will work on the front end. You just won’t be able to see them in the builder canvas.

Please make sure you upvote the Bricks feature request for this functionality.

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