Menu Section Alpha
A minimalist restaurant menu section with optional featured menu items.
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.
Size of the grid row gap
Size of the grid col gap
Background color when a menu item is featured
Border width of featured menu item
Border color of featured menu item
Virtual padding for featured menu item
Extra virtual top padding for featured menu item (for label overlap)
Border radius of the featured menu item
Height of the featured menu item's badge
Granular y-axis position control for perfect centering of badge
Background of the featured menu item's badge
Text color of the featured menu item's badge
Font size of the featured menu item's badge
X-axis padding of the featured menu item's badge
Border raidus of the featured menu item's badge
Style of the connector line between heading & price
Color of the connector line between heading & price
Granular y-axis position control for perfect alignment of connector line
HTML5 Tags & Attributes
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.