Scrollspy

Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.

1In a navbar

Scroll the box: the navbar pill for the visible section becomes active.

Intro

We measure success by how many guests come back and tell their friends. Cooking classes on Saturday mornings teach you our favourite recipes. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.

Bread is baked every morning and pasta is rolled by hand in our kitchen. Thousands of guests already trust us, and we work hard to keep it that way. Children are always welcome, with a menu made just for them.

Details

Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Book a table online in seconds, or call us for groups of eight or more. Our sommelier has paired each dish with wines from small family vineyards.

We have been feeding this neighbourhood for over a decade, and we still love it. Our terrace is open from spring to autumn, with heaters for cooler evenings. Order for pickup or delivery and enjoy the same dishes at home.

Pricing

Our menu changes with the seasons and the best produce from nearby farms. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.

Our menu changes with the seasons and the best produce from nearby farms. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Lyraia</a>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
    <li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
  </ul>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1122" class="pb-3">
    <h3 class="h6">Intro</h3>
    <p class="small">We measure success by how many guests come back and tell their friends. Cooking classes on Saturday mornings teach you our favourite recipes. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.</p>
    <p class="small">Bread is baked every morning and pasta is rolled by hand in our kitchen. Thousands of guests already trust us, and we work hard to keep it that way. Children are always welcome, with a menu made just for them.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. Book a table online in seconds, or call us for groups of eight or more. Our sommelier has paired each dish with wines from small family vineyards.</p>
    <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. Our terrace is open from spring to autumn, with heaters for cooler evenings. Order for pickup or delivery and enjoy the same dishes at home.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.</p>
    <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
</div>

2Horizontal pills

A row of pills above the box tracks the four steps.

Step one

Order for pickup or delivery and enjoy the same dishes at home. Every dish is cooked to order, so tell us if you would like anything changed. We keep things simple, so you can focus on what matters to you.

Step two

Bread is baked every morning and pasta is rolled by hand in our kitchen. Children are always welcome, with a menu made just for them. We measure success by how many guests come back and tell their friends. Our terrace is open from spring to autumn, with heaters for cooler evenings.

Step three

We have been feeding this neighbourhood for over a decade, and we still love it. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.

Step four

Thousands of guests already trust us, and we work hard to keep it that way. Our sommelier has paired each dish with wines from small family vineyards. Book a table online in seconds, or call us for groups of eight or more. Private dining rooms seat up to forty guests for birthdays and business dinners.

<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
  <a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1126" class="pb-3">
    <h3 class="h6">Step one</h3>
    <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Every dish is cooked to order, so tell us if you would like anything changed. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Bread is baked every morning and pasta is rolled by hand in our kitchen. Children are always welcome, with a menu made just for them. We measure success by how many guests come back and tell their friends. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Thousands of guests already trust us, and we work hard to keep it that way. Our sommelier has paired each dish with wines from small family vineyards. Book a table online in seconds, or call us for groups of eight or more. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
  </div>
</div>

3Vertical pills

A column of pills beside the content; on phones the menu sits above.

Private events

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Cooking classes on Saturday mornings teach you our favourite recipes. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.

Takeaway

Every dish is cooked to order, so tell us if you would like anything changed. We have been feeding this neighbourhood for over a decade, and we still love it. Our sommelier has paired each dish with wines from small family vineyards.

Wine pairing

Order for pickup or delivery and enjoy the same dishes at home. Clear prices, honest advice and no surprises along the way. Book a table online in seconds, or call us for groups of eight or more. Bread is baked every morning and pasta is rolled by hand in our kitchen.

Questions

Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Cooking classes on Saturday mornings teach you our favourite recipes.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Private events</a><a class="nav-link" href="#spy-1132">Takeaway</a><a class="nav-link" href="#spy-1133">Wine pairing</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Private events</h3>
        <p class="small">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Cooking classes on Saturday mornings teach you our favourite recipes. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Takeaway</h3>
        <p class="small">Every dish is cooked to order, so tell us if you would like anything changed. We have been feeding this neighbourhood for over a decade, and we still love it. Our sommelier has paired each dish with wines from small family vineyards.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Wine pairing</h3>
        <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Clear prices, honest advice and no surprises along the way. Book a table online in seconds, or call us for groups of eight or more. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

Sub-items are indented under their parent and both highlight while you scroll.

Getting started

Our menu changes with the seasons and the best produce from nearby farms. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We measure success by how many guests come back and tell their friends.

Install

Private dining rooms seat up to forty guests for birthdays and business dinners. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Children are always welcome, with a menu made just for them.

Configure

Thousands of guests already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. Our terrace is open from spring to autumn, with heaters for cooler evenings. Bread is baked every morning and pasta is rolled by hand in our kitchen.

Usage

Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Book a table online in seconds, or call us for groups of eight or more. Private dining rooms seat up to forty guests for birthdays and business dinners.

Examples

Thousands of guests already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We measure success by how many guests come back and tell their friends.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Children are always welcome, with a menu made just for them.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Thousands of guests already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. Our terrace is open from spring to autumn, with heaters for cooler evenings. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Book a table online in seconds, or call us for groups of eight or more. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Thousands of guests already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
      </div>
    </div>
  </div>
</div>

5List group

List group items as the spy menu - clear active state with no extra styling.

Morning Midday Afternoon Evening

Morning

Friendly people answer your questions quickly, by phone, chat or email. Our terrace is open from spring to autumn, with heaters for cooler evenings. We measure success by how many guests come back and tell their friends.

Midday

Clear prices, honest advice and no surprises along the way. Cooking classes on Saturday mornings teach you our favourite recipes. We keep things simple, so you can focus on what matters to you.

Afternoon

We listen first, then build a plan around what you actually need. Our sommelier has paired each dish with wines from small family vineyards. Our menu changes with the seasons and the best produce from nearby farms. Children are always welcome, with a menu made just for them.

Evening

We have been feeding this neighbourhood for over a decade, and we still love it. Every dish is cooked to order, so tell us if you would like anything changed. Order for pickup or delivery and enjoy the same dishes at home. Cooking classes on Saturday mornings teach you our favourite recipes.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1141" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our terrace is open from spring to autumn, with heaters for cooler evenings. We measure success by how many guests come back and tell their friends.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Cooking classes on Saturday mornings teach you our favourite recipes. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Our sommelier has paired each dish with wines from small family vineyards. Our menu changes with the seasons and the best produce from nearby farms. Children are always welcome, with a menu made just for them.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. Every dish is cooked to order, so tell us if you would like anything changed. Order for pickup or delivery and enjoy the same dishes at home. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

Any links work as targets; style the active one with a scoped class.

Alpha Beta Gamma

Alpha

Every dish is cooked to order, so tell us if you would like anything changed. Our sommelier has paired each dish with wines from small family vineyards. Our terrace is open from spring to autumn, with heaters for cooler evenings.

Beta

Our menu changes with the seasons and the best produce from nearby farms. Bread is baked every morning and pasta is rolled by hand in our kitchen. We have been feeding this neighbourhood for over a decade, and we still love it.

Gamma

Thousands of guests already trust us, and we work hard to keep it that way. We measure success by how many guests come back and tell their friends. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
      <a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">Every dish is cooked to order, so tell us if you would like anything changed. Our sommelier has paired each dish with wines from small family vineyards. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Bread is baked every morning and pasta is rolled by hand in our kitchen. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Thousands of guests already trust us, and we work hard to keep it that way. We measure success by how many guests come back and tell their friends. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

An underline nav as a sticky-looking section switcher above a product page.

Overview

We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.

Features

Book a table online in seconds, or call us for groups of eight or more. Order for pickup or delivery and enjoy the same dishes at home. Children are always welcome, with a menu made just for them.

Reviews

Private dining rooms seat up to forty guests for birthdays and business dinners. Clear prices, honest advice and no surprises along the way. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Thousands of guests already trust us, and we work hard to keep it that way.

FAQ

Order for pickup or delivery and enjoy the same dishes at home. Friendly people answer your questions quickly, by phone, chat or email. We have been feeding this neighbourhood for over a decade, and we still love it. We measure success by how many guests come back and tell their friends.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
  <a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</h3>
    <p class="small">We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Book a table online in seconds, or call us for groups of eight or more. Order for pickup or delivery and enjoy the same dishes at home. Children are always welcome, with a menu made just for them.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. Clear prices, honest advice and no surprises along the way. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Thousands of guests already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Friendly people answer your questions quickly, by phone, chat or email. We have been feeding this neighbourhood for over a decade, and we still love it. We measure success by how many guests come back and tell their friends.</p>
  </div>
</div>

8Table of contents on the right

Documentation layout: content first, a small contents list on the right on larger screens.

Summary

Every detail is handled by people who care about getting it right. Our menu changes with the seasons and the best produce from nearby farms. Private dining rooms seat up to forty guests for birthdays and business dinners. Every dish is cooked to order, so tell us if you would like anything changed.

Background

Children are always welcome, with a menu made just for them. Start in minutes and get help from a real person whenever you need it. Cooking classes on Saturday mornings teach you our favourite recipes. Our terrace is open from spring to autumn, with heaters for cooler evenings.

Method

We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

Results

Bread is baked every morning and pasta is rolled by hand in our kitchen. Our team has done this many times, so you never have to guess. Our sommelier has paired each dish with wines from small family vineyards. Book a table online in seconds, or call us for groups of eight or more.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Our menu changes with the seasons and the best produce from nearby farms. Private dining rooms seat up to forty guests for birthdays and business dinners. Every dish is cooked to order, so tell us if you would like anything changed.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Children are always welcome, with a menu made just for them. Start in minutes and get help from a real person whenever you need it. Cooking classes on Saturday mornings teach you our favourite recipes. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Bread is baked every morning and pasta is rolled by hand in our kitchen. Our team has done this many times, so you never have to guess. Our sommelier has paired each dish with wines from small family vineyards. Book a table online in seconds, or call us for groups of eight or more.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first order-md-last">
    <p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-column small">
      <a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
    </nav>
  </div>
</div>

9Numbered steps

<code>.list-group-numbered</code> turns the spy menu into a step counter.

Create an account Set up your profile Invite the team Go live

Create an account

We listen first, then build a plan around what you actually need. We measure success by how many guests come back and tell their friends. We keep things simple, so you can focus on what matters to you. Book a table online in seconds, or call us for groups of eight or more.

Set up your profile

Start in minutes and get help from a real person whenever you need it. Our sommelier has paired each dish with wines from small family vineyards. We have been feeding this neighbourhood for over a decade, and we still love it.

Invite the team

Clear prices, honest advice and no surprises along the way. Private dining rooms seat up to forty guests for birthdays and business dinners. Every dish is cooked to order, so tell us if you would like anything changed. Our team has done this many times, so you never have to guess.

Go live

Our menu changes with the seasons and the best produce from nearby farms. Cooking classes on Saturday mornings teach you our favourite recipes. Every detail is handled by people who care about getting it right. Thousands of guests already trust us, and we work hard to keep it that way.

<div class="row g-3">
  <div class="col-sm-5">
    <div id="spy-nav-1160" class="list-group list-group-numbered">
      <a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
    </div>
  </div>
  <div class="col-sm-7">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">We listen first, then build a plan around what you actually need. We measure success by how many guests come back and tell their friends. We keep things simple, so you can focus on what matters to you. Book a table online in seconds, or call us for groups of eight or more.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Our sommelier has paired each dish with wines from small family vineyards. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Private dining rooms seat up to forty guests for birthdays and business dinners. Every dish is cooked to order, so tell us if you would like anything changed. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Cooking classes on Saturday mornings teach you our favourite recipes. Every detail is handled by people who care about getting it right. Thousands of guests already trust us, and we work hard to keep it that way.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Our chef's guide to seasonal autumn produce

Children are always welcome, with a menu made just for them. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Bread is baked every morning and pasta is rolled by hand in our kitchen.

2024

What our guests asked us most

Order for pickup or delivery and enjoy the same dishes at home. Our terrace is open from spring to autumn, with heaters for cooler evenings. Friendly people answer your questions quickly, by phone, chat or email.

2025

Three pasta shapes to make at home

Every dish is cooked to order, so tell us if you would like anything changed. Children are always welcome, with a menu made just for them. Our team has done this many times, so you never have to guess.

2026

Planning the perfect birthday dinner

Book a table online in seconds, or call us for groups of eight or more. Thousands of guests already trust us, and we work hard to keep it that way. Cooking classes on Saturday mornings teach you our favourite recipes. Every detail is handled by people who care about getting it right.

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">Our chef&#39;s guide to seasonal autumn produce</h3>
    <p class="small mb-0">Children are always welcome, with a menu made just for them. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
  </div>
  <div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">What our guests asked us most</h3>
    <p class="small mb-0">Order for pickup or delivery and enjoy the same dishes at home. Our terrace is open from spring to autumn, with heaters for cooler evenings. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">Three pasta shapes to make at home</h3>
    <p class="small mb-0">Every dish is cooked to order, so tell us if you would like anything changed. Children are always welcome, with a menu made just for them. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">Planning the perfect birthday dinner</h3>
    <p class="small mb-0">Book a table online in seconds, or call us for groups of eight or more. Thousands of guests already trust us, and we work hard to keep it that way. Cooking classes on Saturday mornings teach you our favourite recipes. Every detail is handled by people who care about getting it right.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

How we make our sourdough every morning?: Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.
Our favourite tips for busy weeks?: We keep things simple, so you can focus on what matters to you.
Vegan dishes worth crossing town for?: We measure success by how many guests come back and tell their friends.

Shipping

A beginner's guide to getting started?: Our sommelier has paired each dish with wines from small family vineyards.
The story of our wood-fired oven?: Bread is baked every morning and pasta is rolled by hand in our kitchen.
Five wines to pair with a summer dinner?: Clear prices, honest advice and no surprises along the way.

Returns

Meet the farmers behind our menu?: We have been feeding this neighbourhood for over a decade, and we still love it.
Our chocolate tart, step by step?: Our terrace is open from spring to autumn, with heaters for cooler evenings.
The small habits that make a big difference?: Order for pickup or delivery and enjoy the same dishes at home.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">How we make our sourdough every morning?</dt>
          <dd class="small text-body-secondary">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
          <dt class="small">Vegan dishes worth crossing town for?</dt>
          <dd class="small text-body-secondary">We measure success by how many guests come back and tell their friends.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">Our sommelier has paired each dish with wines from small family vineyards.</dd>
          <dt class="small">The story of our wood-fired oven?</dt>
          <dd class="small text-body-secondary">Bread is baked every morning and pasta is rolled by hand in our kitchen.</dd>
          <dt class="small">Five wines to pair with a summer dinner?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Meet the farmers behind our menu?</dt>
          <dd class="small text-body-secondary">We have been feeding this neighbourhood for over a decade, and we still love it.</dd>
          <dt class="small">Our chocolate tart, step by step?</dt>
          <dd class="small text-body-secondary">Our terrace is open from spring to autumn, with heaters for cooler evenings.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Order for pickup or delivery and enjoy the same dishes at home.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

Each spy link starts with an icon - nice for spec sheets.

Performance

Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it. Our menu changes with the seasons and the best produce from nearby farms.

Battery

Private dining rooms seat up to forty guests for birthdays and business dinners. We listen first, then build a plan around what you actually need. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We listen first, then build a plan around what you actually need.

Connectivity

Friendly people answer your questions quickly, by phone, chat or email. We have been feeding this neighbourhood for over a decade, and we still love it. Children are always welcome, with a menu made just for them. Cooking classes on Saturday mornings teach you our favourite recipes.

Security

Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Order for pickup or delivery and enjoy the same dishes at home. Private dining rooms seat up to forty guests for birthdays and business dinners.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-column">
      <a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it. Our menu changes with the seasons and the best produce from nearby farms.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. We listen first, then build a plan around what you actually need. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We have been feeding this neighbourhood for over a decade, and we still love it. Children are always welcome, with a menu made just for them. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. Order for pickup or delivery and enjoy the same dishes at home. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

Spy over a stack of plan cards; the pill row shows which plan is in view.

Starter

$9.18 / mo

Kid friendly
Local ingredients
Chef's specials

Team

$48.65 / mo

Chef's specials
Vegan options
Local ingredients

Business

$77.87 / mo

Chef's specials
Kid friendly
Online reservations

<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
  <a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1180" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Starter</h3>
      <p class="fs-4 fw-bold mb-1">$9.18<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Kid friendly</li>
        <li>Local ingredients</li>
        <li>Chef&#39;s specials</li>
      </ul>
    </div>
  </div>
  <div id="spy-1181" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Team</h3>
      <p class="fs-4 fw-bold mb-1">$48.65<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Chef&#39;s specials</li>
        <li>Vegan options</li>
        <li>Local ingredients</li>
      </ul>
    </div>
  </div>
  <div id="spy-1182" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Business</h3>
      <p class="fs-4 fw-bold mb-1">$77.87<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Chef&#39;s specials</li>
        <li>Kid friendly</li>
        <li>Online reservations</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

A reading pane with chapter links in a small dropdown-free list above.

Chapter 1: What is new on our winter menu

We keep things simple, so you can focus on what matters to you. Thousands of guests already trust us, and we work hard to keep it that way. Our terrace is open from spring to autumn, with heaters for cooler evenings. We measure success by how many guests come back and tell their friends.

Our sommelier has paired each dish with wines from small family vineyards. Book a table online in seconds, or call us for groups of eight or more. Bread is baked every morning and pasta is rolled by hand in our kitchen.

Chapter 2: How to choose the right dish

Every dish is cooked to order, so tell us if you would like anything changed. Thousands of guests already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email.

Chapter 3: Five things we learned this year

Our team has done this many times, so you never have to guess. Our sommelier has paired each dish with wines from small family vineyards. Book a table online in seconds, or call us for groups of eight or more.

Cooking classes on Saturday mornings teach you our favourite recipes. Private dining rooms seat up to forty guests for birthdays and business dinners. Our terrace is open from spring to autumn, with heaters for cooler evenings.

Chapter 4: Looking back at a busy season

Order for pickup or delivery and enjoy the same dishes at home. Bread is baked every morning and pasta is rolled by hand in our kitchen. We keep things simple, so you can focus on what matters to you.

We listen first, then build a plan around what you actually need. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.

<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
  <a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-3">
    <h3 class="h6">Chapter 1: What is new on our winter menu</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Thousands of guests already trust us, and we work hard to keep it that way. Our terrace is open from spring to autumn, with heaters for cooler evenings. We measure success by how many guests come back and tell their friends.</p>
    <p class="small">Our sommelier has paired each dish with wines from small family vineyards. Book a table online in seconds, or call us for groups of eight or more. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: How to choose the right dish</h3>
    <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Every dish is cooked to order, so tell us if you would like anything changed. Thousands of guests already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Five things we learned this year</h3>
    <p class="small">Our team has done this many times, so you never have to guess. Our sommelier has paired each dish with wines from small family vineyards. Book a table online in seconds, or call us for groups of eight or more.</p>
    <p class="small">Cooking classes on Saturday mornings teach you our favourite recipes. Private dining rooms seat up to forty guests for birthdays and business dinners. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Looking back at a busy season</h3>
    <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Bread is baked every morning and pasta is rolled by hand in our kitchen. We keep things simple, so you can focus on what matters to you.</p>
    <p class="small">We listen first, then build a plan around what you actually need. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.</p>
  </div>
</div>

15Settings form

A long settings form split into sections with a side menu that follows along.

Profile Notifications Privacy

Profile

Display name

City

Children are always welcome, with a menu made just for them. We have been feeding this neighbourhood for over a decade, and we still love it. Every detail is handled by people who care about getting it right. We measure success by how many guests come back and tell their friends.

Notifications

Product news

Weekly digest

Our menu changes with the seasons and the best produce from nearby farms. Every dish is cooked to order, so tell us if you would like anything changed. We have been feeding this neighbourhood for over a decade, and we still love it. We keep things simple, so you can focus on what matters to you.

Privacy

Hide my profile from search

We measure success by how many guests come back and tell their friends. Bread is baked every morning and pasta is rolled by hand in our kitchen. Children are always welcome, with a menu made just for them. Every dish is cooked to order, so tell us if you would like anything changed.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded">
      <a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1189" class="pb-3">
        <h3 class="h6">Profile</h3>
        <div class="mb-2">
          <label for="spy-in-1192" class="form-label small">Display name</label>
          <input class="form-control form-control-sm" id="spy-in-1192" value="Maya Moreau">
        </div>
        <div class="mb-2">
          <label for="spy-in-1193" class="form-label small">City</label>
          <input class="form-control form-control-sm" id="spy-in-1193" value="Dublin">
        </div>
        <p class="small">Children are always welcome, with a menu made just for them. We have been feeding this neighbourhood for over a decade, and we still love it. Every detail is handled by people who care about getting it right. We measure success by how many guests come back and tell their friends.</p>
      </div>
      <div id="spy-1190" class="pb-3">
        <h3 class="h6">Notifications</h3>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
          <label class="form-check-label small" for="spy-sw-1194">Product news</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
          <label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
        </div>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Every dish is cooked to order, so tell us if you would like anything changed. We have been feeding this neighbourhood for over a decade, and we still love it. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1191" class="pb-3">
        <h3 class="h6">Privacy</h3>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="spy-sw-1196">
          <label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
        </div>
        <p class="small">We measure success by how many guests come back and tell their friends. Bread is baked every morning and pasta is rolled by hand in our kitchen. Children are always welcome, with a menu made just for them. Every dish is cooked to order, so tell us if you would like anything changed.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Customer Support

Mateo Patel
Product Designer
Omar Silva
QA Engineer
Ella Carter
Support Specialist

Finance

Ava Ortega
Art Director
Mia Novak
Marketing Lead
Ivy Nguyen
HR Partner

Engineering

Mateo Rossi
Marketing Lead
Owen Haddad
Project Manager
Lucas Tanaka
QA Engineer

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Customer Support</a><a class="nav-link" href="#spy-1199">Finance</a><a class="nav-link" href="#spy-1200">Engineering</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Customer Support</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Mateo Patel"><div><div class="small fw-semibold">Mateo Patel</div><div class="small text-body-secondary">Product Designer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Omar Silva"><div><div class="small fw-semibold">Omar Silva</div><div class="small text-body-secondary">QA Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Ella Carter"><div><div class="small fw-semibold">Ella Carter</div><div class="small text-body-secondary">Support Specialist</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Finance</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Ava Ortega"><div><div class="small fw-semibold">Ava Ortega</div><div class="small text-body-secondary">Art Director</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Mia Novak"><div><div class="small fw-semibold">Mia Novak</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Ivy Nguyen"><div><div class="small fw-semibold">Ivy Nguyen</div><div class="small text-body-secondary">HR Partner</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Engineering</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Mateo Rossi"><div><div class="small fw-semibold">Mateo Rossi</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Owen Haddad"><div><div class="small fw-semibold">Owen Haddad</div><div class="small text-body-secondary">Project Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Lucas Tanaka"><div><div class="small fw-semibold">Lucas Tanaka</div><div class="small text-body-secondary">QA Engineer</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Drinks

Truffle pasta$24.99
Lemon tiramisu$11.00
Espresso martini$12.00

Desserts

Burrata with tomatoes$14.00
Slow-cooked lamb$29.99
Grilled salmon$26.99

Starters

Garden salad$12.00
Slow-cooked lamb$32.00
Lemon tiramisu$10.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Drinks</a><a class="nav-link" href="#spy-1203">Desserts</a><a class="nav-link" href="#spy-1204">Starters</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-3">
    <h3 class="h6">Drinks</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Truffle pasta</span><span class="fw-semibold">$24.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Lemon tiramisu</span><span class="fw-semibold">$11.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Espresso martini</span><span class="fw-semibold">$12.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Desserts</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Burrata with tomatoes</span><span class="fw-semibold">$14.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Slow-cooked lamb</span><span class="fw-semibold">$29.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Grilled salmon</span><span class="fw-semibold">$26.99</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Starters</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Garden salad</span><span class="fw-semibold">$12.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Slow-cooked lamb</span><span class="fw-semibold">$32.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Lemon tiramisu</span><span class="fw-semibold">$10.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Private dining rooms seat up to forty guests for birthdays and business dinners. Clear prices, honest advice and no surprises along the way. Thousands of guests already trust us, and we work hard to keep it that way. Our terrace is open from spring to autumn, with heaters for cooler evenings.

This week

Book a table online in seconds, or call us for groups of eight or more. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.

Later

We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Our sommelier has paired each dish with wines from small family vineyards. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

<div class="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. Clear prices, honest advice and no surprises along the way. Thousands of guests already trust us, and we work hard to keep it that way. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Book a table online in seconds, or call us for groups of eight or more. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Our sommelier has paired each dish with wines from small family vineyards. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

The whole widget inside <code>data-ui-theme="dark"</code>.

Launch

Order for pickup or delivery and enjoy the same dishes at home. Our menu changes with the seasons and the best produce from nearby farms. Cooking classes on Saturday mornings teach you our favourite recipes.

Orbit

Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Thousands of guests already trust us, and we work hard to keep it that way. Our menu changes with the seasons and the best produce from nearby farms.

Landing

We measure success by how many guests come back and tell their friends. Our team has done this many times, so you never have to guess. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our terrace is open from spring to autumn, with heaters for cooler evenings.

<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
  <nav id="spy-nav-1209" class="nav nav-pills mb-2">
    <a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
  </nav>
  <div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Our menu changes with the seasons and the best produce from nearby farms. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Thousands of guests already trust us, and we work hard to keep it that way. Our menu changes with the seasons and the best produce from nearby farms.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">We measure success by how many guests come back and tell their friends. Our team has done this many times, so you never have to guess. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
    </div>
  </div>
</div>

20Changelog

Version links on the left follow release notes with coloured change badges.

v3.2 Feb 16, 2026

NewPrivate dining rooms seat up to forty guests for birthdays and business dinners.
ImprovedOur sommelier has paired each dish with wines from small family vineyards.
FixedOrder for pickup or delivery and enjoy the same dishes at home.

v3.1 Oct 25, 2025

NewEvery detail is handled by people who care about getting it right.
ImprovedStart in minutes and get help from a real person whenever you need it.
FixedFriendly people answer your questions quickly, by phone, chat or email.

v3.0 Apr 11, 2026

NewBook a table online in seconds, or call us for groups of eight or more.
ImprovedClear prices, honest advice and no surprises along the way.
FixedBread is baked every morning and pasta is rolled by hand in our kitchen.

v2.9 Aug 1, 2026

NewWe have been feeding this neighbourhood for over a decade, and we still love it.
ImprovedWe listen first, then build a plan around what you actually need.
FixedCooking classes on Saturday mornings teach you our favourite recipes.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-column small">
      <a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
    </nav>
  </div>
  <div class="col-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-3">
        <h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Feb 16, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Private dining rooms seat up to forty guests for birthdays and business dinners.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our sommelier has paired each dish with wines from small family vineyards.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Order for pickup or delivery and enjoy the same dishes at home.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Oct 25, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every detail is handled by people who care about getting it right.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Start in minutes and get help from a real person whenever you need it.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Friendly people answer your questions quickly, by phone, chat or email.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Apr 11, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Book a table online in seconds, or call us for groups of eight or more.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Clear prices, honest advice and no surprises along the way.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Bread is baked every morning and pasta is rolled by hand in our kitchen.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Aug 1, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We have been feeding this neighbourhood for over a decade, and we still love it.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We listen first, then build a plan around what you actually need.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Cooking classes on Saturday mornings teach you our favourite recipes.</li>
        </ul>
      </div>
    </div>
  </div>
</div>