Menu Section Alpha

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

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.

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.

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.

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.