Get started with the World's Best & Most SEO friendly Website & eCommerce Platform
 
FAQ's
  1. Home
  2. FAQs
  3. Bootstrap / Front-end
  4. Styling Restaurant Menus

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>
view raw standard-restaurant-menu.html hosted with ❤ by GitHub
  <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>
view raw standard-restaurant-menu.html hosted with ❤ by GitHub
  <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>
view raw standard-restaurant-menu.html hosted with ❤ by GitHub
 

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>
view raw restaurant-menu-with-dots.html hosted with ❤ by GitHub
  <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>
view raw restaurant-menu-with-dots.html hosted with ❤ by GitHub
  <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>
view raw restaurant-menu-with-dots.html hosted with ❤ by GitHub
 

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.

  <h3>With Description</h3>
  <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>
view raw restaurant-menu-with-description.html hosted with ❤ by GitHub
  <h3>With Description</h3>
  <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>
view raw restaurant-menu-with-description.html hosted with ❤ by GitHub
  <h3>With Description</h3>
  <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>
view raw restaurant-menu-with-description.html hosted with ❤ by GitHub
 

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>
view raw restaurant-menu-with-dots-plus-description.html hosted with ❤ by GitHub
  <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>
view raw restaurant-menu-with-dots-plus-description.html hosted with ❤ by GitHub
  <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>
view raw restaurant-menu-with-dots-plus-description.html hosted with ❤ by GitHub
 

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>
view raw restaurant-menu-with-description-styles.html hosted with ❤ by GitHub
  <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>
view raw restaurant-menu-with-description-styles.html hosted with ❤ by GitHub
  <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>
view raw restaurant-menu-with-description-styles.html hosted with ❤ by GitHub
 

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>
view raw restaurant-menu-with-dots-plus-description-styled.html hosted with ❤ by GitHub
  <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>
view raw restaurant-menu-with-dots-plus-description-styled.html hosted with ❤ by GitHub
  <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>
view raw restaurant-menu-with-dots-plus-description-styled.html hosted with ❤ by GitHub
 

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>
view raw restaurant-menu-with-dots-single-item.html hosted with ❤ by GitHub
  <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>
view raw restaurant-menu-with-dots-single-item.html hosted with ❤ by GitHub
  <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>
view raw restaurant-menu-with-dots-single-item.html hosted with ❤ by GitHub

Building & Branding Websites that Get Results

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

Contact Us
Privacy Policy / Sitemap
Copyright © 2020 CMS Max. All Rights Reserved