How to Style Restaurant Menus on Your Web Page

The markup and class structure should look like the following:

  • restaurant-menu
    • restaurant-menu-item
      • restaurant-menu-item-name
      • restaurant-menu-item-price
      • restaurant-menu-item-description (optional)
    • restaurant-menu-item
      • restaurant-menu-item-name
      • restaurant-menu-item-price
      • restaurant-menu-item-description (optional)
    • ...

Modifiers

Add with-dot-leaders to display dot leaders for menu items.

Add with-description to bold the menu item name and italicize the description.

Note: these modifiers can be applied to restaurant-menu to apply to all menu items in that group or to restaurant-menu-item to only apply them to a single menu item.

 
 

Standard

Chicken Fajitas $11.99
Chicken Wings $14.99

<div class="restaurant-menu">
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Fajitas </span>
<span class="restaurant-menu-item-price"> $11.99 </span>
</div>
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Wings </span>
<span class="restaurant-menu-item-price"> $14.99 </span>
</div>
</div>

 

With Dots

Chicken Fajitas $11.99
Chicken Wings $14.99

<div class="restaurant-menu with-dot-leaders">
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Fajitas </span>
<span class="restaurant-menu-item-price"> $11.99 </span>
</div>
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Wings </span>
<span class="restaurant-menu-item-price"> $14.99 </span>
</div>
</div>
 

With Description

Chicken Fajitas $11.99
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse.
Chicken Wings $14.99
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.

<div class="restaurant-menu">
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Fajitas </span>
<span class="restaurant-menu-item-price"> $11.99 </span>
<div class="restaurant-menu-item-description">Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse.</div>
</div>
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Wings </span>
<span class="restaurant-menu-item-price"> $14.99 </span>
<div class="restaurant-menu-item-description">Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.</div>
</div>
</div>
 

With Dots + Description

Chicken Fajitas $11.99
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse.
Chicken Wings $14.99
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.

<div class="restaurant-menu with-dot-leaders">
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Fajitas </span>
<span class="restaurant-menu-item-price"> $11.99 </span>
<div class="restaurant-menu-item-description">Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse.</div>
</div>
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Wings </span>
<span class="restaurant-menu-item-price"> $14.99 </span>
<div class="restaurant-menu-item-description">Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.</div>
</div>
</div>
 

Additional Styling For Items With Descriptions

With Description

Chicken Fajitas $11.99
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse.
Chicken Wings $14.99
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.

<div class="restaurant-menu with-description">
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Fajitas </span>
<span class="restaurant-menu-item-price"> $11.99 </span>
<div class="restaurant-menu-item-description">Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse.</div>
</div>
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Wings </span>
<span class="restaurant-menu-item-price"> $14.99 </span>
<div class="restaurant-menu-item-description">Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.</div>
</div>
</div>
 

With Dots + Description

Chicken Fajitas $11.99
Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse.
Chicken Wings $14.99
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.

<div class="restaurant-menu with-dot-leaders with-description">
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Fajitas </span>
<span class="restaurant-menu-item-price"> $11.99 </span>
<div class="restaurant-menu-item-description">Lorem ipsum dolor sit amet consectetur adipiscing, elit aenean convallis ligula rhoncus primis orci, proin ante ac cursus suspendisse.</div>
</div>
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Wings </span>
<span class="restaurant-menu-item-price"> $14.99 </span>
<div class="restaurant-menu-item-description">Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.</div>
</div>
</div>
 

Applying Dots To a Single Menu Item

If you want dots on particular menu items and not all items, add the class with-dot-leaders class to a restaurant-menu-item to have dots on that particular menu item.

With Dots

Chicken Wings $14.99
Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.
Chicken Fajitas $11.99

<div class="restaurant-menu with-description">
<div class="restaurant-menu-item">
<span class="restaurant-menu-item-name">Chicken Wings</span>
<span class="restaurant-menu-item-price">$14.99</span>
<div class="restaurant-menu-item-description">Lorem ipsum dolor sit amet consectetur adipiscing elit faucibus fusce, penatibus sem ante laoreet nisl pretium condimentum.</div>
</div>
<div class="restaurant-menu-item with-dot-leaders">
<span class="restaurant-menu-item-name">Chicken Fajitas </span>
<span class="restaurant-menu-item-price">$11.99</span>
</div>
</div>

New Menu With Dots

Greens & Beans
You Already Know...
$10
Fried Mozz
with Spicy Pomodoro + Basil Pesto
$15

HTML

<div class="food-menu">
<h2 class="section-title">New Menu With Dots</h2>
<div class="food-menu__item"> <div class="food-menu__name">Greens &amp;&nbsp;Beans</div>
<div class="food-menu__description-wrapper">
<div class="food-menu__description">You Already Know...</div>
<div class="food-menu__price">$10</div>
</div>
</div>
<div class="food-menu__item">
<div class="food-menu__name">Fried Mozz</div>
<div class="food-menu__description-wrapper">
<div class="food-menu__description">with Spicy Pomodoro + Basil Pesto</div>
<div class="food-menu__price">$15</div>
</div>
</div>
</div>
 

CSS

.food-menu {
h2.section-title { margin-bottom: 42px; color: #252525; }
&__item { display: block; margin-bottom: 21px; padding-bottom: 10px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-bottom: 2px dashed #252525; font-size: 16px; line-height: 24px; }
&__name { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; font-family: 'Palmer Sans', sans-serif; color: #252525; font-size: 24px; font-weight: 600; } &__description-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
&__description { width: 90%; color: #252525; font-size: 14px; }
&__price { margin-left: 21px; color: #252525; font-size: 20px; font-weight: 600; }
}

Building Relationships with Web Developers and Marketing Agencies that want better results

The world's fastest and most SEO friendly website code.

VIEW PACKAGES