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

Bread is baked every morning and pasta is rolled by hand in our kitchen. 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. Children are always welcome, with a menu made just for them.

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Private dining rooms seat up to forty guests for birthdays and business dinners. Friendly people answer your questions quickly, by phone, chat or email.

Details

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. Every detail is handled by people who care about getting it right.

Our terrace is open from spring to autumn, with heaters for cooler evenings. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.

Pricing

Clear prices, honest advice and no surprises along the way. Every dish is cooked to order, so tell us if you would like anything changed. We measure success by how many guests come back and tell their friends. We listen first, then build a plan around what you actually need.

Our sommelier has paired each dish with wines from small family vineyards. 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.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Delta</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">Bread is baked every morning and pasta is rolled by hand in our kitchen. 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. Children are always welcome, with a menu made just for them.</p>
    <p class="small">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Private dining rooms seat up to forty guests for birthdays and business dinners. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</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. Every detail is handled by people who care about getting it right.</p>
    <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Every dish is cooked to order, so tell us if you would like anything changed. We measure success by how many guests come back and tell their friends. We listen first, then build a plan around what you actually need.</p>
    <p class="small">Our sommelier has paired each dish with wines from small family vineyards. 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.</p>
  </div>
</div>

2Horizontal pills

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

Step one

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

Step two

We keep things simple, so you can focus on what matters to you. Our menu changes with the seasons and the best produce from nearby farms. Children are always welcome, with a menu made just for them.

Step three

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. Book a table online in seconds, or call us for groups of eight or more.

Step four

Private dining rooms seat up to forty guests for birthdays and business dinners. Our team has done this many times, so you never have to guess. Our terrace is open from spring to autumn, with heaters for cooler evenings.

<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">We have been feeding this neighbourhood for over a decade, and we still love it. Cooking classes on Saturday mornings teach you our favourite recipes. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. 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-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <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. Book a table online in seconds, or call us for groups of eight or more.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. Our team has done this many times, so you never have to guess. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
  </div>
</div>

3Vertical pills

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

Takeaway

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. We measure success by how many guests come back and tell their friends. Order for pickup or delivery and enjoy the same dishes at home.

Wine pairing

Clear prices, honest advice and no surprises along the way. Our sommelier has paired each dish with wines from small family vineyards. Every dish is cooked to order, so tell us if you would like anything changed. Every detail is handled by people who care about getting it right.

Catering

We have been feeding this neighbourhood for over a decade, and we still love it. Cooking classes on Saturday mornings teach you our favourite recipes. Thousands of guests already trust us, and we work hard to keep it that way.

Questions

Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. 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">Takeaway</a><a class="nav-link" href="#spy-1132">Wine pairing</a><a class="nav-link" href="#spy-1133">Catering</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">Takeaway</h3>
        <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. We measure success by how many guests come back and tell their friends. Order for pickup or delivery and enjoy the same dishes at home.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Wine pairing</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Our sommelier has paired each dish with wines from small family vineyards. Every dish is cooked to order, so tell us if you would like anything changed. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Catering</h3>
        <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. Cooking classes on Saturday mornings teach you our favourite recipes. Thousands of guests already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. 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

Clear prices, honest advice and no surprises along the way. Bread is baked every morning and pasta is rolled by hand in our kitchen. Our menu changes with the seasons and the best produce from nearby farms. We listen first, then build a plan around what you actually need.

Install

Children are always welcome, with a menu made just for them. Our terrace is open from spring to autumn, with heaters for cooler evenings. We keep things simple, so you can focus on what matters to you.

Configure

We have been feeding this neighbourhood for over a decade, and we still love it. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our team has done this many times, so you never have to guess. Private dining rooms seat up to forty guests for birthdays and business dinners.

Usage

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. Every dish is cooked to order, so tell us if you would like anything changed. Friendly people answer your questions quickly, by phone, chat or email.

Examples

Order for pickup or delivery and enjoy the same dishes at home. We measure success by how many guests come back and tell their friends. 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.

<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">Clear prices, honest advice and no surprises along the way. Bread is baked every morning and pasta is rolled by hand in our kitchen. Our menu changes with the seasons and the best produce from nearby farms. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Children are always welcome, with a menu made just for them. Our terrace is open from spring to autumn, with heaters for cooler evenings. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our team has done this many times, so you never have to guess. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">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. Every dish is cooked to order, so tell us if you would like anything changed. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Order for pickup or delivery and enjoy the same dishes at home. We measure success by how many guests come back and tell their friends. 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>
  </div>
</div>

5List group

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

Morning Midday Afternoon Evening

Morning

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. We listen first, then build a plan around what you actually need. Every dish is cooked to order, so tell us if you would like anything changed.

Midday

Cooking classes on Saturday mornings teach you our favourite recipes. 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.

Afternoon

Our menu changes with the seasons and the best produce from nearby farms. Book a table online in seconds, or call us for groups of eight or more. Clear prices, honest advice and no surprises along the way.

Evening

We keep things simple, so you can focus on what matters to you. 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.

<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">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. We listen first, then build a plan around what you actually need. Every dish is cooked to order, so tell us if you would like anything changed.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Cooking classes on Saturday mornings teach you our favourite recipes. 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-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Book a table online in seconds, or call us for groups of eight or more. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. 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>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Our sommelier has paired each dish with wines from small family vineyards. Private dining rooms seat up to forty guests for birthdays and business dinners.

Beta

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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Private dining rooms seat up to forty guests for birthdays and business dinners.

Gamma

Every detail is handled by people who care about getting it right. Bread is baked every morning and pasta is rolled by hand in our kitchen. Every dish is cooked to order, so tell us if you would like anything changed. Start in minutes and get help from a real person whenever you need it.

<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">Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email. Our sommelier has paired each dish with wines from small family vineyards. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Bread is baked every morning and pasta is rolled by hand in our kitchen. Every dish is cooked to order, so tell us if you would like anything changed. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Book a table online in seconds, or call us for groups of eight or more.

Features

Our sommelier has paired each dish with wines from small family vineyards. We listen first, then build a plan around what you actually need. Children are always welcome, with a menu made just for them. We measure success by how many guests come back and tell their friends.

Reviews

Order for pickup or delivery and enjoy the same dishes at home. Thousands of guests already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you.

FAQ

Our menu changes with the seasons and the best produce from nearby farms. Cooking classes on Saturday mornings teach you our favourite recipes. We have been feeding this neighbourhood for over a decade, and we still love it.

<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">Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Book a table online in seconds, or call us for groups of eight or more.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Our sommelier has paired each dish with wines from small family vineyards. We listen first, then build a plan around what you actually need. Children are always welcome, with a menu made just for them. We measure success by how many guests come back and tell their friends.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Thousands of guests already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</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. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

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. We have been feeding this neighbourhood for over a decade, and we still love it.

Background

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.

Method

Every detail is handled by people who care about getting it right. 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.

Results

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

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">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. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">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.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Every detail is handled by people who care about getting it right. 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.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</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

Cooking classes on Saturday mornings teach you our favourite recipes. Order for pickup or delivery and enjoy the same dishes at home. Friendly people answer your questions quickly, by phone, chat or email.

Set up your profile

Children are always welcome, with a menu made just for them. Our terrace is open from spring to autumn, with heaters for cooler evenings. Book a table online in seconds, or call us for groups of eight or more. Start in minutes and get help from a real person whenever you need it.

Invite the team

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. Private dining rooms seat up to forty guests for birthdays and business dinners.

Go live

We listen first, then build a plan around what you actually need. Thousands of guests already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it.

<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">Cooking classes on Saturday mornings teach you our favourite recipes. Order for pickup or delivery and enjoy the same dishes at home. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Children are always welcome, with a menu made just for them. Our terrace is open from spring to autumn, with heaters for cooler evenings. Book a table online in seconds, or call us for groups of eight or more. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">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. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Thousands of guests already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Five wines to pair with a summer dinner

Cooking classes on Saturday mornings teach you our favourite recipes. Clear prices, honest advice and no surprises along the way. Our terrace is open from spring to autumn, with heaters for cooler evenings.

2024

Our chef's guide to seasonal autumn produce

Children are always welcome, with a menu made just for them. 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.

2025

Our favourite tips for busy weeks

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. Bread is baked every morning and pasta is rolled by hand in our kitchen. Our sommelier has paired each dish with wines from small family vineyards.

2026

The small habits that make a big difference

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Order for pickup or delivery and enjoy the same dishes at home. Book a table online in seconds, or call us for groups of eight or more.

<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">Five wines to pair with a summer dinner</h3>
    <p class="small mb-0">Cooking classes on Saturday mornings teach you our favourite recipes. Clear prices, honest advice and no surprises along the way. Our terrace is open from spring to autumn, with heaters for cooler evenings.</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">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. 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.</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">Our favourite tips for busy weeks</h3>
    <p class="small mb-0">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. Bread is baked every morning and pasta is rolled by hand in our kitchen. Our sommelier has paired each dish with wines from small family vineyards.</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">The small habits that make a big difference</h3>
    <p class="small mb-0">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Order for pickup or delivery and enjoy the same dishes at home. Book a table online in seconds, or call us for groups of eight or more.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Planning the perfect birthday dinner?: We measure success by how many guests come back and tell their friends.
What our guests asked us most?: Our menu changes with the seasons and the best produce from nearby farms.
Looking back at a busy season?: Friendly people answer your questions quickly, by phone, chat or email.

Shipping

Our chocolate tart, step by step?: Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.
How to choose the right dish?: Our sommelier has paired each dish with wines from small family vineyards.
What is new on our winter menu?: We measure success by how many guests come back and tell their friends.

Returns

Three pasta shapes to make at home?: Every detail is handled by people who care about getting it right.
Vegan dishes worth crossing town for?: Order for pickup or delivery and enjoy the same dishes at home.
Five things we learned this year?: Our terrace is open from spring to autumn, with heaters for cooler evenings.

<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">Planning the perfect birthday dinner?</dt>
          <dd class="small text-body-secondary">We measure success by how many guests come back and tell their friends.</dd>
          <dt class="small">What our guests asked us most?</dt>
          <dd class="small text-body-secondary">Our menu changes with the seasons and the best produce from nearby farms.</dd>
          <dt class="small">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</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">Our chocolate tart, step by step?</dt>
          <dd class="small text-body-secondary">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</dd>
          <dt class="small">How to choose the right dish?</dt>
          <dd class="small text-body-secondary">Our sommelier has paired each dish with wines from small family vineyards.</dd>
          <dt class="small">What is new on our winter menu?</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-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Three pasta shapes to make at home?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">Vegan dishes worth crossing town for?</dt>
          <dd class="small text-body-secondary">Order for pickup or delivery and enjoy the same dishes at home.</dd>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">Our terrace is open from spring to autumn, with heaters for cooler evenings.</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. Our team has done this many times, so you never have to guess. Thousands of guests already trust us, and we work hard to keep it that way.

Battery

Book a table online in seconds, or call us for groups of eight or more. 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.

Connectivity

Children are always welcome, with a menu made just for them. Our menu changes with the seasons and the best produce from nearby farms. 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.

Security

We keep things simple, so you can focus on what matters to you. Private dining rooms seat up to forty guests for birthdays and business dinners. Cooking classes on Saturday mornings teach you our favourite recipes.

<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. Our team has done this many times, so you never have to guess. Thousands of guests already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Book a table online in seconds, or call us for groups of eight or more. 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.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Children are always welcome, with a menu made just for them. Our menu changes with the seasons and the best produce from nearby farms. 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.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Private dining rooms seat up to forty guests for birthdays and business dinners. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$16.58 / mo

Local ingredients
Kid friendly
Vegan options

Team

$45.97 / mo

Online reservations
Vegan options
Online reservations

Business

$72.32 / mo

Local ingredients
Chef's specials
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">$16.58<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Local ingredients</li>
        <li>Kid friendly</li>
        <li>Vegan options</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">$45.97<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Online reservations</li>
        <li>Vegan options</li>
        <li>Online reservations</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">$72.32<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Local ingredients</li>
        <li>Chef&#39;s specials</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: Meet the farmers behind our menu

Clear prices, honest advice and no surprises along the way. 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. Cooking classes on Saturday mornings teach you our favourite recipes. Every detail is handled by people who care about getting it right. We have been feeding this neighbourhood for over a decade, and we still love it.

Chapter 2: How we make our sourdough every morning

Start in minutes and get help from a real person whenever you need it. Bread is baked every morning and pasta is rolled by hand in our kitchen. Our sommelier has paired each dish with wines from small family vineyards. Thousands of guests already trust us, and we work hard to keep it that way.

Every dish is cooked to order, so tell us if you would like anything changed. We listen first, then build a plan around what you actually need. Our terrace is open from spring to autumn, with heaters for cooler evenings.

Chapter 3: The story of our wood-fired oven

Order for pickup or delivery and enjoy the same dishes at home. 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. 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. Friendly people answer your questions quickly, by phone, chat or email. Private dining rooms seat up to forty guests for birthdays and business dinners.

Chapter 4: A beginner's guide to 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. Our sommelier has paired each dish with wines from small family vineyards.

Our team has done this many times, so you never have to guess. Every dish is cooked to order, so tell us if you would like anything changed. Our menu changes with the seasons and the best produce from nearby farms.

<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: Meet the farmers behind our menu</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. 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.</p>
    <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. Every detail is handled by people who care about getting it right. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: How we make our sourdough every morning</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Bread is baked every morning and pasta is rolled by hand in our kitchen. Our sommelier has paired each dish with wines from small family vineyards. Thousands of guests already trust us, and we work hard to keep it that way.</p>
    <p class="small">Every dish is cooked to order, so tell us if you would like anything changed. We listen first, then build a plan around what you actually need. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: The story of our wood-fired oven</h3>
    <p class="small">Order for pickup or delivery and enjoy the same dishes at home. 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. Clear prices, honest advice and no surprises along the way.</p>
    <p class="small">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. Friendly people answer your questions quickly, by phone, chat or email. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: A beginner&#39;s guide to 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. Our sommelier has paired each dish with wines from small family vineyards.</p>
    <p class="small">Our team has done this many times, so you never have to guess. Every dish is cooked to order, so tell us if you would like anything changed. Our menu changes with the seasons and the best produce from nearby farms.</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

Cooking classes on Saturday mornings teach you our favourite recipes. Our terrace is open from spring to autumn, with heaters for cooler evenings. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many guests come back and tell their friends.

Notifications

Product news

Weekly digest

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. Book a table online in seconds, or call us for groups of eight or more.

Privacy

Hide my profile from search

Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Thousands of guests already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need.

<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="Felix Duarte">
        </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="Valencia">
        </div>
        <p class="small">Cooking classes on Saturday mornings teach you our favourite recipes. Our terrace is open from spring to autumn, with heaters for cooler evenings. Friendly people answer your questions quickly, by phone, chat or email. 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">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. Book a table online in seconds, or call us for groups of eight or more.</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">Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. Thousands of guests already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Finance

Leo Hughes
Project Manager
Noah Harlow
Project Manager
Mia Ibrahim
HR Partner

Legal

Nora Novak
Product Designer
Jonah Alvarez
Operations Manager
Priya Hughes
Backend Engineer

Engineering

Luna Tanaka
Sales Executive
Theo Ortega
HR Partner
Ravi Mensah
Art Director

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Finance</a><a class="nav-link" href="#spy-1199">Legal</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">Finance</h3>
    <ul class="list-unstyled">
      <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="Leo Hughes"><div><div class="small fw-semibold">Leo Hughes</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-7.svg" class="rounded-circle" width="36" height="36" alt="Noah Harlow"><div><div class="small fw-semibold">Noah Harlow</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-12.svg" class="rounded-circle" width="36" height="36" alt="Mia Ibrahim"><div><div class="small fw-semibold">Mia Ibrahim</div><div class="small text-body-secondary">HR Partner</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Legal</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Nora Novak"><div><div class="small fw-semibold">Nora Novak</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-7.svg" class="rounded-circle" width="36" height="36" alt="Jonah Alvarez"><div><div class="small fw-semibold">Jonah Alvarez</div><div class="small text-body-secondary">Operations 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="Priya Hughes"><div><div class="small fw-semibold">Priya Hughes</div><div class="small text-body-secondary">Backend Engineer</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-11.svg" class="rounded-circle" width="36" height="36" alt="Luna Tanaka"><div><div class="small fw-semibold">Luna Tanaka</div><div class="small text-body-secondary">Sales Executive</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="Theo Ortega"><div><div class="small fw-semibold">Theo Ortega</div><div class="small text-body-secondary">HR Partner</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Ravi Mensah"><div><div class="small fw-semibold">Ravi Mensah</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Drinks

Grilled salmon$30.00
Truffle pasta$25.00
Chef's tasting plate$44.00

Starters

House lemonade$5.00
Seasonal soup$8.00
Garden salad$12.00

Desserts

House lemonade$5.00
Chef's tasting plate$45.00
Chocolate tart$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">Starters</a><a class="nav-link" href="#spy-1204">Desserts</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>Grilled salmon</span><span class="fw-semibold">$30.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Truffle pasta</span><span class="fw-semibold">$25.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Chef&#39;s tasting plate</span><span class="fw-semibold">$44.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" 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>House lemonade</span><span class="fw-semibold">$5.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Seasonal soup</span><span class="fw-semibold">$8.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Garden salad</span><span class="fw-semibold">$12.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" 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>House lemonade</span><span class="fw-semibold">$5.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Chef&#39;s tasting plate</span><span class="fw-semibold">$45.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Chocolate tart</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

Order for pickup or delivery and enjoy the same dishes at home. Every detail is handled by people who care about getting it right. Bread is baked every morning and pasta is rolled by hand in our kitchen.

This week

We keep things simple, so you can focus on what matters to you. Private dining rooms seat up to forty guests for birthdays and business dinners. Thousands of guests already trust us, and we work hard to keep it that way.

Later

Our sommelier has paired each dish with wines from small family vineyards. Clear prices, honest advice and no surprises along the way. 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.

<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">Order for pickup or delivery and enjoy the same dishes at home. Every detail is handled by people who care about getting it right. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Private dining rooms seat up to forty guests for birthdays and business dinners. Thousands of guests already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Our sommelier has paired each dish with wines from small family vineyards. Clear prices, honest advice and no surprises along the way. 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>
  </div>
</div>

19Dark theme

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

Launch

Start in minutes and get help from a real person whenever you need it. Children are always welcome, with a menu made just for them. Cooking classes on Saturday mornings teach you our favourite recipes.

Orbit

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. Bread is baked every morning and pasta is rolled by hand in our kitchen. We listen first, then build a plan around what you actually need.

Landing

Our terrace is open from spring to autumn, with heaters for cooler evenings. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you.

<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">Start in minutes and get help from a real person whenever you need 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-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">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. Bread is baked every morning and pasta is rolled by hand in our kitchen. We listen first, then build a plan around what you actually need.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Feb 3, 2026

NewPrivate dining rooms seat up to forty guests for birthdays and business dinners.
ImprovedEvery dish is cooked to order, so tell us if you would like anything changed.
FixedOrder for pickup or delivery and enjoy the same dishes at home.

v3.1 Jan 5, 2026

NewBook a table online in seconds, or call us for groups of eight or more.
ImprovedFriendly people answer your questions quickly, by phone, chat or email.
FixedPrivate dining rooms seat up to forty guests for birthdays and business dinners.

v3.0 Dec 30, 2025

NewChildren are always welcome, with a menu made just for them.
ImprovedWe listen first, then build a plan around what you actually need.
FixedFriendly people answer your questions quickly, by phone, chat or email.

v2.9 Sep 12, 2026

NewOrder for pickup or delivery and enjoy the same dishes at home.
ImprovedWe keep things simple, so you can focus on what matters to you.
FixedOur sommelier has paired each dish with wines from small family vineyards.

<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 3, 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>Every dish is cooked to order, so tell us if you would like anything changed.</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">Jan 5, 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>Friendly people answer your questions quickly, by phone, chat or email.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Private dining rooms seat up to forty guests for birthdays and business dinners.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Dec 30, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Children are always welcome, with a menu made just for them.</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>Friendly people answer your questions quickly, by phone, chat or email.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Sep 12, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Order for pickup or delivery and enjoy the same dishes at home.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our sommelier has paired each dish with wines from small family vineyards.</li>
        </ul>
      </div>
    </div>
  </div>
</div>