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

See Markup

With Dots

See Markup

With Description

See Markup

With Dots + Description

See Markup

Additional Styling For Items With Descriptions

With Description

See Markup

With Dots + Description

See Markup

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

See Markup