Open daily: 7:30 am to 11:00 pm

Elements

If you can dream it, you can do it

Menus

To create a menu item with the food item, description and price, use the tm-menu-item tm-menu-compound class. You can place the tm-menu-item code within <div class="uk-panel-space">...</div> for better formatting and spacing.


markup
<div class="tm-menu-item tm-menu-compound">
<h3 class="tm-menu-name">Tagliatelle Bolognese</h3>

<span class="tm-menu-dots"></span>
<span class="tm-menu-price">$ 3.50</span>
<span class="tm-menu-desc">Ground beef . tomato sauce . red wine . spices</span>
</div>

You can also add badges to the menu items to indicate recommendations or notification e.g. Vegetarian dishes

markup
<div class="tm-menu-item tm-menu-compound">
<h3 class="tm-menu-name">Tagliatelle Bolognese</h3>

<div class="uk-badge-danger uk-badge">hot</div>
<span class="tm-menu-dots"></span>
<span class="tm-menu-price">$ 3.50</span>
<span class="tm-menu-desc">Ground beef . tomato sauce . red wine . spices</span>
</div>

Single Menu Item

You can create a single line menu item by using the tm-menu-item class only, which only shows the menu name and price.


markup
<div class="tm-menu-item">
<h3 class="tm-menu-name">Americano</h3>

<span class="tm-menu-dots"></span>
<span class="tm-menu-price">$ 1.50</span>
</div>

Menu Item with image

You can create a menu item with an image by using the following code, which will show a small sized photo of the food, menu name, description and price.


markup
<div class="tm-menu-item tm-menu-compound">
  <div class="uk-grid" data-uk-grid-margin>
    <div class="uk-width-1-5">
      <img class="uk-align-left uk-thumbnail uk-border-circle" src="images/demo/menu/food-9.jpg" width="72" height="72" alt="Baked potato jackets">
    </div>

    <div class="uk-width-4-5">
      <div class="uk-margin-small-left">
        <h3 class="tm-menu-name">Baked potato jackets</h3>
        <span class="tm-menu-dots"></span>
        <span class="tm-menu-price">$ 6.50</span> 
        <span class="tm-menu-desc">Chicken breast . spiced bread crumbs . chips or mashed</span> </div>
    </div>
  </div>
</div>

By adding the menu items in a grid column, you can create a nicely formatted menu tables with different variety and coloration.


Avocado shell stuffed

Avocado shell stuffed

$ 8.50 Caramelized onions . tomatoes . mashed potatoes
Baked potato jackets

Baked potato jackets

$ 6.50 Chicken breast . spiced bread crumbs . chips or mashed

Tagliatelle Bolognese

$ 3.50 Ground beef . tomato sauce . red wine . spices

Agliolio Linguine

hot
$ 8.50 Caramelized onions . tomatoes . mashed potatoes. tilapia

Coffee

best way to start your day

Espresso

$ 3.50

Cappuccino

$ 1.50

Americano

$ 1.50

Caffe Latte

$ 2.50

Show code

<div class="uk-grid uk-grid-width-medium-1-2 uk-grid-width-large-1-3" data-uk-grid-margin> <div class="uk-panel uk-panel-space"> <div class="tm-menu-item tm-menu-compound"> <div class="uk-grid" data-uk-grid-margin> <div class="uk-width-1-5"> <img class="uk-align-left uk-thumbnail uk-border-circle" src="images/demo/menu/food-8.jpg" width="72" height="72" alt="Avocado shell stuffed"> </div> <div class="uk-width-4-5"> <div class="uk-margin-small-left"> <h3 class="tm-menu-name">Avocado shell stuffed</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 8.50</span> <span class="tm-menu-desc">Caramelized onions . tomatoes . mashed potatoes</span> </div> </div> </div> </div> <div class="tm-menu-item tm-menu-compound"> <div class="uk-grid" data-uk-grid-margin> <div class="uk-width-1-5"> <img class="uk-align-left uk-thumbnail uk-border-circle" src="images/demo/menu/food-9.jpg" width="72" height="72" alt="Baked potato jackets"> </div> <div class="uk-width-4-5"> <div class="uk-margin-small-left"> <h3 class="tm-menu-name">Baked potato jackets</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 6.50</span> <span class="tm-menu-desc">Chicken breast . spiced bread crumbs . chips or mashed</span> </div> </div> </div> </div> </div> <div class="uk-panel uk-panel-space"> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">Tagliatelle Bolognese</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 3.50</span> <span class="tm-menu-desc">Ground beef . tomato sauce . red wine . spices</span> </div> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">Agliolio Linguine</h3> <div class="uk-badge-danger uk-badge">hot</div> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 8.50</span> <span class="tm-menu-desc">Caramelized onions . tomatoes . mashed potatoes. tilapia</span> </div> </div> <div class="uk-panel uk-panel-space tm-secondary-background uk-border-rounded"> <div class="uk-text-center"> <h3 class="uk-h2 uk-module-title-alt uk-margin-remove">Coffee</h3> <h5 class="uk-margin-top-remove uk-margin-large-bottom">best way to start your day</h5> </div> <div class="tm-menu-item"> <h3 class="tm-menu-name">Espresso</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 3.50</span> </div> <div class="tm-menu-item"> <h3 class="tm-menu-name">Cappuccino</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 1.50</span> </div> <div class="tm-menu-item"> <h3 class="tm-menu-name">Americano</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 1.50</span> </div> <div class="tm-menu-item"> <h3 class="tm-menu-name">Caffe Latte</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 2.50</span> </div> </div> </div>

You can also add menus to a slideset to show them in tabular form using the [menu_tabs] shortcode.


  • classic nachos

    classic nachos

    hot
    $ 6.50 Corn chips topped with cheese sauce, served with sour cream, guacamole & pico de gallo
    Avocado shell stuffed

    Avocado shell stuffed

    $ 8.50 Caramelized onions . tomatoes . mashed potatoes. tilapia
    Baked potato jackets

    Baked potato jackets

    $ 6.50 Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce
    nachos grande

    nachos grande

    $ 3.50 Corn chips. Mexican fried chili beans. sour cream. guacamole & salsa. chili lamb mince
    quesadillas acapulco

    quesadillas acapulco

    v
    $ 2.50 A flour tortilla. cheese tomatoes jalapeño. fresh cilantro. vegetable arrabbiata
    mexican taco shells

    mexican taco shells

    $ 6.50 Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce

  • daily cheese sandwich

    $ 6.50 Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce

    tuna salad

    $ 8.50 Caramelized onions . tomatoes . mashed potatoes. tilapia

    ham & cheese sandwich

    $ 6.50 Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce

    halloumi fromage

    $ 7.50 Chicken . spiced bread crumbs . chips or mashed potatoes . aioli sauce

    French Salad

    v
    $ 3.50 Green vegetables . spiced bread crumbs . chips or mashed potatoes . french dressing

    club omelette

    hot
    $ 8.50 Caramelized onions . tomatoes . mashed potatoes. tilapia

    belgian waffles

    $ 6.50 Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce

    pancake stack

    $ 7.50 Chicken . spiced bread crumbs . chips or mashed potatoes . aioli sauce

  • Penne Arrabiata

    v
    $ 6.50 Tomato sauce . parsley . snap peas . parmesan . red chilli (chilli – optional)

    Linguine Dania

    v
    $ 8.50 Tomato sauce . garlic . parsley . mascarpone

    Gaucho Pesto

    $ 6.50 Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce

    Linguini Carbonara

    $ 7.50 Bacon .egg . cream . fried onion . parmesan

    Tagliatelle Bolognese

    $ 3.50 Ground beef . tomato sauce . red wine . spices

    Agliolio Linguine

    $ 8.50 Caramelized onions . tomatoes . mashed potatoes. tilapia

    Creamed Mushroom Penne

    $ 6.50 Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce

    Butternut Ravioli

    $ 7.50 Chicken . spiced bread crumbs . chips or mashed potatoes . aioli sauce

Show code

<div class="tm-slideset-gaucho" data-uk-slideset="{default: 1, animation: 'fade'}"> <ul class="uk-subnav uk-flex-center"> <li data-uk-filter=""><a href="#">All</a> </li> <li data-uk-filter="appetizers"><a href="#">appetizers</a> </li> <li data-uk-filter="breakfast"><a href="#">breakfast</a> </li> <li data-uk-filter="pasta"><a href="#">pasta</a> </li> </ul> <div class="uk-slidenav-position uk-margin"> <ul class="uk-grid uk-slideset uk-grid-match uk-flex-center"> <li data-uk-filter="appetizers"> <div class="uk-panel uk-text-left"> <div class="uk-grid uk-grid-width-medium-1-2 uk-grid-width-large-1-2" data-uk-grid-margin> <div class="uk-panel uk-panel-space"> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <div class="uk-grid" data-uk-grid-margin> <div class="uk-width-1-5"> <img class="uk-align-left uk-thumbnail uk-border-circle" src="images/demo/menu/food-7.jpg" width="72" height="72" alt="classic nachos"> </div> <div class="uk-width-4-5"> <div class="uk-margin-small-left"> <h3 class="tm-menu-name">classic nachos</h3> <div class="uk-badge-danger uk-badge">hot</div> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 6.50</span> <span class="tm-menu-desc">Corn chips topped with cheese sauce, served with sour cream, guacamole & pico de gallo</span> </div> </div> </div> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <div class="uk-grid" data-uk-grid-margin> <div class="uk-width-1-5"> <img class="uk-align-left uk-thumbnail uk-border-circle" src="images/demo/menu/food-8.jpg" width="72" height="72" alt="Avocado shell stuffed"> </div> <div class="uk-width-4-5"> <div class="uk-margin-small-left"> <h3 class="tm-menu-name">Avocado shell stuffed</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 8.50</span> <span class="tm-menu-desc">Caramelized onions . tomatoes . mashed potatoes. tilapia</span> </div> </div> </div> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <div class="uk-grid" data-uk-grid-margin> <div class="uk-width-1-5"> <img class="uk-align-left uk-thumbnail uk-border-circle" src="images/demo/menu/food-9.jpg" width="72" height="72" alt="Baked potato jackets"> </div> <div class="uk-width-4-5"> <div class="uk-margin-small-left"> <h3 class="tm-menu-name">Baked potato jackets</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 6.50</span> <span class="tm-menu-desc">Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce</span> </div> </div> </div> </div> </div> <div class="uk-panel uk-panel-space"> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <div class="uk-grid" data-uk-grid-margin> <div class="uk-width-1-5"> <img class="uk-align-left uk-thumbnail uk-border-circle" src="images/demo/menu/food-10.jpg" width="72" height="72" alt="nachos grande"> </div> <div class="uk-width-4-5"> <div class="uk-margin-small-left"> <h3 class="tm-menu-name">nachos grande</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 3.50</span> <span class="tm-menu-desc">Corn chips. Mexican fried chili beans. sour cream. guacamole & salsa. chili lamb mince</span> </div> </div> </div> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <div class="uk-grid" data-uk-grid-margin> <div class="uk-width-1-5"> <img class="uk-align-left uk-thumbnail uk-border-circle" src="images/demo/menu/food-11.jpg" width="72" height="72" alt="quesadillas acapulco"> </div> <div class="uk-width-4-5"> <div class="uk-margin-small-left"> <h3 class="tm-menu-name">quesadillas acapulco</h3> <div class="uk-badge-note uk-badge-notification uk-badge">v</div> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 2.50</span> <span class="tm-menu-desc">A flour tortilla. cheese tomatoes jalapeño. fresh cilantro. vegetable arrabbiata</span> </div> </div> </div> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <div class="uk-grid" data-uk-grid-margin> <div class="uk-width-1-5"> <img class="uk-align-left uk-thumbnail uk-border-circle" src="images/demo/menu/food-12.jpg" width="72" height="72" alt="mexican taco shells"> </div> <div class="uk-width-4-5"> <div class="uk-margin-small-left"> <h3 class="tm-menu-name">mexican taco shells</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 6.50</span> <span class="tm-menu-desc">Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce</span> </div> </div> </div> </div> </div> </div> </div> </li> <li data-uk-filter="breakfast"> <div class="uk-panel uk-text-left"> <div class="uk-grid uk-grid-width-medium-1-2 uk-grid-width-large-1-2" data-uk-grid-margin> <div class="uk-panel uk-panel-space"> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">daily cheese sandwich</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 6.50</span> <span class="tm-menu-desc">Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce</span> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">tuna salad</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 8.50</span> <span class="tm-menu-desc">Caramelized onions . tomatoes . mashed potatoes. tilapia</span> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">ham & cheese sandwich</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 6.50</span> <span class="tm-menu-desc">Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce</span> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">halloumi fromage</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 7.50</span> <span class="tm-menu-desc">Chicken . spiced bread crumbs . chips or mashed potatoes . aioli sauce</span> </div> </div> <div class="uk-panel uk-panel-space"> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">French Salad</h3> <div class="uk-badge-note uk-badge-notification uk-badge">v</div> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 3.50</span> <span class="tm-menu-desc">Green vegetables . spiced bread crumbs . chips or mashed potatoes . french dressing</span> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">club omelette</h3> <div class="uk-badge-danger uk-badge">hot</div> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 8.50</span> <span class="tm-menu-desc">Caramelized onions . tomatoes . mashed potatoes. tilapia</span> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">belgian waffles</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 6.50</span> <span class="tm-menu-desc">Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce</span> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">pancake stack</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 7.50</span> <span class="tm-menu-desc">Chicken . spiced bread crumbs . chips or mashed potatoes . aioli sauce</span> </div> </div> </div> </div> </li> <li data-uk-filter="pasta"> <div class="uk-panel uk-text-left"> <div class="uk-grid uk-grid-width-medium-1-2 uk-grid-width-large-1-2" data-uk-grid-margin> <div class="uk-panel uk-panel-space"> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">Penne Arrabiata</h3> <div class="uk-badge-note uk-badge-notification uk-badge">v</div> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 6.50</span> <span class="tm-menu-desc">Tomato sauce . parsley . snap peas . parmesan . red chilli (chilli – optional)</span> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">Linguine Dania</h3> <div class="uk-badge-note uk-badge-notification uk-badge">v</div> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 8.50</span> <span class="tm-menu-desc">Tomato sauce . garlic . parsley . mascarpone</span> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">Gaucho Pesto</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 6.50</span> <span class="tm-menu-desc">Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce</span> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">Linguini Carbonara</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 7.50</span> <span class="tm-menu-desc">Bacon .egg . cream . fried onion . parmesan</span> </div> </div> <div class="uk-panel uk-panel-space"> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">Tagliatelle Bolognese</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 3.50</span> <span class="tm-menu-desc">Ground beef . tomato sauce . red wine . spices</span> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">Agliolio Linguine</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 8.50</span> <span class="tm-menu-desc">Caramelized onions . tomatoes . mashed potatoes. tilapia</span> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">Creamed Mushroom Penne</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 6.50</span> <span class="tm-menu-desc">Chicken breast . spiced bread crumbs . chips or mashed potatoes . aioli sauce</span> </div> <!-- menu item --> <div class="tm-menu-item tm-menu-compound"> <h3 class="tm-menu-name">Butternut Ravioli</h3> <span class="tm-menu-dots"></span> <span class="tm-menu-price">$ 7.50</span> <span class="tm-menu-desc">Chicken . spiced bread crumbs . chips or mashed potatoes . aioli sauce</span> </div> </div> </div> </div> </li> </ul> <ul class="uk-slideset-nav uk-dotnav uk-flex-center uk-margin-bottom-remove"> <li data-uk-slideset-item="0"> <a></a> </li> </ul> </div> </div>
demo