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

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. Thousands of guests already trust us, and we work hard to keep it that way.

Clear prices, honest advice and no surprises along the way. Our sommelier has paired each dish with wines from small family vineyards. We listen first, then build a plan around what you actually need.

Details

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

Friendly people answer your questions quickly, by phone, chat or email. Our terrace is open from spring to autumn, with heaters for cooler evenings. 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.

Pricing

Children are always welcome, with a menu made just for them. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our menu changes with the seasons and the best produce from nearby farms.

We measure success by how many guests come back and tell their friends. Every detail is handled by people who care about getting it right. Order for pickup or delivery and enjoy the same dishes at home.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Muse</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">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. Thousands of guests already trust us, and we work hard to keep it that way.</p>
    <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. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</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. We keep things simple, so you can focus on what matters to you.</p>
    <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. 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 id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Children are always welcome, with a menu made just for them. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our menu changes with the seasons and the best produce from nearby farms.</p>
    <p class="small">We measure success by how many guests come back and tell their friends. Every detail is handled by people who care about getting it right. Order for pickup or delivery and enjoy the same dishes at home.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Every dish is cooked to order, so tell us if you would like anything changed. Private dining rooms seat up to forty guests for birthdays and business dinners. Clear prices, honest advice and no surprises along the way.

Step two

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. 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.

Step three

Our menu changes with the seasons and the best produce from nearby farms. Cooking classes on Saturday mornings teach you our favourite recipes. Book a table online in seconds, or call us for groups of eight or more. We listen first, then build a plan around what you actually need.

Step four

Start in minutes and get help from a real person whenever you need it. 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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

<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">Every dish is cooked to order, so tell us if you would like anything changed. Private dining rooms seat up to forty guests for birthdays and business dinners. Clear prices, honest advice and no surprises along the way.</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. Bread is baked every morning and pasta is rolled by hand in our kitchen. 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.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</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. Book a table online in seconds, or call us for groups of eight or more. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. 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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
  </div>
</div>

3Vertical pills

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

Takeaway

Friendly people answer your questions quickly, by phone, chat or email. 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. We have been feeding this neighbourhood for over a decade, and we still love it.

Wine pairing

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

Catering

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

Questions

Private dining rooms seat up to forty guests for birthdays and business dinners. Friendly people answer your questions quickly, by phone, chat or email. Children are always welcome, with a menu made just for them.

<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">Friendly people answer your questions quickly, by phone, chat or email. 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. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Wine pairing</h3>
        <p class="small">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. Our sommelier has paired each dish with wines from small family vineyards.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Catering</h3>
        <p class="small">Children are always welcome, with a menu made just for them. Bread is baked every morning and pasta is rolled by hand in our kitchen. 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.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. Friendly people answer your questions quickly, by phone, chat or email. Children are always welcome, with a menu made just for them.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

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. Clear prices, honest advice and no surprises along the way.

Install

Every dish is cooked to order, so tell us if you would like anything changed. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. 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. We listen first, then build a plan around what you actually need. Cooking classes on Saturday mornings teach you our favourite recipes. Our terrace is open from spring to autumn, with heaters for cooler evenings.

Usage

Our menu changes with the seasons and the best produce from nearby farms. 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. Every detail is handled by people who care about getting it right.

Examples

Our team has done this many times, so you never have to guess. Cooking classes on Saturday mornings teach you our favourite recipes. Our menu changes with the seasons and the best produce from nearby farms.

<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">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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Every dish is cooked to order, so tell us if you would like anything changed. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. 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. We listen first, then build a plan around what you actually need. 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-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. 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. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Cooking classes on Saturday mornings teach you our favourite recipes. Our menu changes with the seasons and the best produce from nearby farms.</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 have been feeding this neighbourhood for over a decade, and we still love it.

Midday

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

Afternoon

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. We measure success by how many guests come back and tell their friends.

Evening

Vegan, vegetarian and gluten-free dishes are marked clearly on every 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.

<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 have been feeding this neighbourhood for over a decade, and we still love it.</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. 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. Our sommelier has paired each dish with wines from small family vineyards.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">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. We measure success by how many guests come back and tell their friends.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Vegan, vegetarian and gluten-free dishes are marked clearly on every 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.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Our team has done this many times, so you never have to guess. Children are always welcome, with a menu made just for them. Order for pickup or delivery and enjoy the same dishes at home.

Beta

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 have been feeding this neighbourhood for over a decade, and we still love it. Thousands of guests already trust us, and we work hard to keep it that way.

Gamma

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

<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">Our team has done this many times, so you never have to guess. Children are always welcome, with a menu made just for them. Order for pickup or delivery and enjoy the same dishes at home.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</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 have been feeding this neighbourhood for over a decade, and we still love it. Thousands of guests already trust us, and we work hard to keep it that way.</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. 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>
  </div>
</div>

7Underline tabs

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

Overview

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. Clear prices, honest advice and no surprises along the way.

Features

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

Reviews

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. Cooking classes on Saturday mornings teach you our favourite recipes. Order for pickup or delivery and enjoy the same dishes at home.

FAQ

Book a table online in seconds, or call us for groups of eight or more. 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. Private dining rooms seat up to forty guests for birthdays and business dinners.

<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 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. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Children are always welcome, with a menu made just for them. 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.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</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. Cooking classes on Saturday mornings teach you our favourite recipes. Order for pickup or delivery and enjoy the same dishes at home.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Book a table online in seconds, or call us for groups of eight or more. 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. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Friendly people answer your questions quickly, by phone, chat or email. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We keep things simple, so you can focus on what matters to you. Our sommelier has paired each dish with wines from small family vineyards.

Background

Children are always welcome, with a menu made just for them. Our terrace is open from spring to autumn, with heaters for cooler evenings. Cooking classes on Saturday mornings teach you our favourite recipes.

Method

Every detail is handled by people who care about getting it right. 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 have been feeding this neighbourhood for over a decade, and we still love it.

Results

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. Our team has done this many times, so you never have to guess.

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">Friendly people answer your questions quickly, by phone, chat or email. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We keep things simple, so you can focus on what matters to you. Our sommelier has paired each dish with wines from small family vineyards.</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. Our terrace is open from spring to autumn, with heaters for cooler evenings. Cooking classes on Saturday mornings teach you our favourite recipes.</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. 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 have been feeding this neighbourhood for over a decade, and we still love it.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">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. Our team has done this many times, so you never have to guess.</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

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. Start in minutes and get help from a real person whenever you need it.

Set up your profile

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. Private dining rooms seat up to forty guests for birthdays and business dinners. Bread is baked every morning and pasta is rolled by hand in our kitchen.

Invite the team

We listen first, then build a plan around what you actually need. 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.

Go live

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. Our menu changes with the seasons and the best produce from nearby farms.

<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">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. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">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. Private dining rooms seat up to forty guests for birthdays and business dinners. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">We listen first, then build a plan around what you actually need. 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.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">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. Our menu changes with the seasons and the best produce from nearby farms.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Our chef's guide to seasonal autumn produce

Our terrace is open from spring to autumn, with heaters for cooler evenings. 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.

2024

Our favourite tips for busy weeks

Every dish is cooked to order, so tell us if you would like anything changed. Clear prices, honest advice and no surprises along the way. Children are always welcome, with a menu made just for them.

2025

Meet the farmers behind our menu

Friendly people answer your questions quickly, by phone, chat or email. 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.

2026

Our chocolate tart, step by step

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. 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">Our chef&#39;s guide to seasonal autumn produce</h3>
    <p class="small mb-0">Our terrace is open from spring to autumn, with heaters for cooler evenings. 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-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 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. Clear prices, honest advice and no surprises along the way. Children are always welcome, with a menu made just for them.</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">Meet the farmers behind our menu</h3>
    <p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. 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-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">Our chocolate tart, step by step</h3>
    <p class="small mb-0">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. 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

What is new on our winter menu?: We measure success by how many guests come back and tell their friends.
What our guests asked us most?: Bread is baked every morning and pasta is rolled by hand in our kitchen.
Three pasta shapes to make at home?: We listen first, then build a plan around what you actually need.

Shipping

The small habits that make a big difference?: Our team has done this many times, so you never have to guess.
Five things we learned this year?: Every dish is cooked to order, so tell us if you would like anything changed.
Looking back at a busy season?: Thousands of guests already trust us, and we work hard to keep it that way.

Returns

Planning the perfect birthday dinner?: Our menu changes with the seasons and the best produce from nearby farms.
The story of our wood-fired oven?: We listen first, then build a plan around what you actually need.
Five wines to pair with a summer dinner?: Friendly people answer your questions quickly, by phone, chat or email.

<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">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>
          <dt class="small">What our guests asked us most?</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">Three pasta shapes to make at home?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</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">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">Every dish is cooked to order, so tell us if you would like anything changed.</dd>
          <dt class="small">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">Thousands of guests already trust us, and we work hard to keep it that 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">Planning the perfect birthday dinner?</dt>
          <dd class="small text-body-secondary">Our menu changes with the seasons and the best produce from nearby farms.</dd>
          <dt class="small">The story of our wood-fired oven?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">Five wines to pair with a summer dinner?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Private dining rooms seat up to forty guests for birthdays and business dinners. Children are always welcome, with a menu made just for them. Our team has done this many times, so you never have to guess.

Battery

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. Start in minutes and get help from a real person whenever you need it.

Connectivity

Bread is baked every morning and pasta is rolled by hand in our kitchen. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We keep things simple, so you can focus on what matters to you.

Security

Order for pickup or delivery and enjoy the same dishes at home. Cooking classes on Saturday mornings teach you our favourite recipes. Our sommelier has paired each dish with wines from small family vineyards.

<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">Private dining rooms seat up to forty guests for birthdays and business dinners. 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-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. 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 id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Bread is baked every morning and pasta is rolled by hand in our kitchen. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Cooking classes on Saturday mornings teach you our favourite recipes. Our sommelier has paired each dish with wines from small family vineyards.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$13.81 / mo

Kid friendly
Kid friendly
Local ingredients

Team

$45.60 / mo

Kid friendly
Chef's specials
Vegan options

Business

$53.42 / mo

Online reservations
Local ingredients
Fast delivery

<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">$13.81<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Kid friendly</li>
        <li>Kid friendly</li>
        <li>Local ingredients</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.60<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Kid friendly</li>
        <li>Chef&#39;s specials</li>
        <li>Vegan options</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">$53.42<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Online reservations</li>
        <li>Local ingredients</li>
        <li>Fast delivery</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: How to choose the right dish

We measure success by how many guests come back and tell their friends. 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.

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. Bread is baked every morning and pasta is rolled by hand in our kitchen.

Chapter 2: How we make our sourdough every morning

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. Our terrace is open from spring to autumn, with heaters for cooler evenings. We have been feeding this neighbourhood for over a decade, and we still love it.

Our team has done this many times, so you never have to guess. 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. Every detail is handled by people who care about getting it right.

Chapter 3: Vegan dishes worth crossing town for

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. We listen first, then build a plan around what you actually need. Order for pickup or delivery and enjoy the same dishes at home.

Friendly people answer your questions quickly, by phone, chat or email. Private dining rooms seat up to forty guests for birthdays and business dinners. Clear prices, honest advice and no surprises along the way. We measure success by how many guests come back and tell their friends.

Chapter 4: A beginner's guide to getting started

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

Our terrace is open from spring to autumn, with heaters for cooler evenings. Every dish is cooked to order, so tell us if you would like anything changed. Book a table online in seconds, or call us for groups of eight or more. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

<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: How to choose the right dish</h3>
    <p class="small">We measure success by how many guests come back and tell their friends. 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.</p>
    <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. 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 we make our sourdough every morning</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. Our terrace is open from spring to autumn, with heaters for cooler evenings. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
    <p class="small">Our team has done this many times, so you never have to guess. 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. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Vegan dishes worth crossing town for</h3>
    <p class="small">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. We listen first, then build a plan around what you actually need. Order for pickup or delivery and enjoy the same dishes at home.</p>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Private dining rooms seat up to forty guests for birthdays and business dinners. Clear prices, honest advice and no surprises along the way. We measure success by how many guests come back and tell their friends.</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 sommelier has paired each dish with wines from small family vineyards. 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.</p>
    <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. Every dish is cooked to order, so tell us if you would like anything changed. Book a table online in seconds, or call us for groups of eight or more. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</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. Clear prices, honest advice and no surprises along the way. Private dining rooms seat up to forty guests for birthdays and business dinners.

Notifications

Product news

Weekly digest

Thousands of guests already trust us, and we work hard to keep it that way. 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 listen first, then build a plan around what you actually need.

Privacy

Hide my profile from search

Start in minutes and get help from a real person whenever you need it. We measure success by how many guests come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.

<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="Ravi Ashford">
        </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="Kyoto">
        </div>
        <p class="small">Children are always welcome, with a menu made just for them. Clear prices, honest advice and no surprises along the way. Private dining rooms seat up to forty guests for birthdays and business dinners.</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">Thousands of guests already trust us, and we work hard to keep it that way. 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 listen first, then build a plan around what you actually need.</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">Start in minutes and get help from a real person whenever you need it. We measure success by how many guests come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Finance

Mia Tanaka
Sales Executive
Omar Morgan
Data Analyst
Ethan Varga
Content Writer

Operations

Liam Novak
Backend Engineer
Kenji Ibrahim
Backend Engineer
Ivy Carter
Project Manager

Engineering

Aria Nguyen
Support Specialist
Luna Silva
Project Manager
Owen Duarte
Sales Executive

<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">Operations</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-6.svg" class="rounded-circle" width="36" height="36" alt="Mia Tanaka"><div><div class="small fw-semibold">Mia 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-12.svg" class="rounded-circle" width="36" height="36" alt="Omar Morgan"><div><div class="small fw-semibold">Omar Morgan</div><div class="small text-body-secondary">Data Analyst</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="Ethan Varga"><div><div class="small fw-semibold">Ethan Varga</div><div class="small text-body-secondary">Content Writer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Operations</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Liam Novak"><div><div class="small fw-semibold">Liam Novak</div><div class="small text-body-secondary">Backend Engineer</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="Kenji Ibrahim"><div><div class="small fw-semibold">Kenji Ibrahim</div><div class="small text-body-secondary">Backend Engineer</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="Ivy Carter"><div><div class="small fw-semibold">Ivy Carter</div><div class="small text-body-secondary">Project Manager</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-7.svg" class="rounded-circle" width="36" height="36" alt="Aria Nguyen"><div><div class="small fw-semibold">Aria Nguyen</div><div class="small text-body-secondary">Support Specialist</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="Luna Silva"><div><div class="small fw-semibold">Luna Silva</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-4.svg" class="rounded-circle" width="36" height="36" alt="Owen Duarte"><div><div class="small fw-semibold">Owen Duarte</div><div class="small text-body-secondary">Sales Executive</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Starters

Seasonal soup$9.00
Grilled salmon$28.99
Garden salad$13.00

Desserts

Burrata with tomatoes$15.00
Chocolate tart$9.00
Wood-fired pizza$18.00

Drinks

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

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Starters</a><a class="nav-link" href="#spy-1203">Desserts</a><a class="nav-link" href="#spy-1204">Drinks</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">Starters</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Seasonal soup</span><span class="fw-semibold">$9.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Grilled salmon</span><span class="fw-semibold">$28.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Garden salad</span><span class="fw-semibold">$13.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">$15.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Chocolate tart</span><span class="fw-semibold">$9.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Wood-fired pizza</span><span class="fw-semibold">$18.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" 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>Espresso martini</span><span class="fw-semibold">$12.00</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>Truffle pasta</span><span class="fw-semibold">$22.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Cooking classes on Saturday mornings teach you our favourite recipes. Order for pickup or delivery and enjoy the same dishes at home. 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.

This week

Our menu changes with the seasons and the best produce from nearby farms. Our sommelier has paired each dish with wines from small family vineyards. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

Later

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 sommelier has paired each dish with wines from small family vineyards. Our menu changes with the seasons and the best produce from nearby farms.

<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">Cooking classes on Saturday mornings teach you our favourite recipes. Order for pickup or delivery and enjoy the same dishes at home. 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.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. 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 id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">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 sommelier has paired each dish with wines from small family vineyards. Our menu changes with the seasons and the best produce from nearby farms.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

We listen first, then build a plan around what you actually need. Private dining rooms seat up to forty guests for birthdays and business dinners. We have been feeding this neighbourhood for over a decade, and we still love it.

Orbit

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. Thousands of guests already trust us, and we work hard to keep it that way.

Landing

Book a table online in seconds, or call us for groups of eight or more. 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 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">We listen first, then build a plan around what you actually need. Private dining rooms seat up to forty guests for birthdays and business dinners. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</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. Thousands of guests already trust us, and we work hard to keep it that way.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Book a table online in seconds, or call us for groups of eight or more. 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 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 Apr 25, 2026

NewOur team has done this many times, so you never have to guess.
ImprovedEvery dish is cooked to order, so tell us if you would like anything changed.
FixedEvery detail is handled by people who care about getting it right.

v3.1 Jun 12, 2026

NewClear prices, honest advice and no surprises along the way.
ImprovedOrder for pickup or delivery and enjoy the same dishes at home.
FixedWe listen first, then build a plan around what you actually need.

v3.0 Mar 9, 2026

NewWe measure success by how many guests come back and tell their friends.
ImprovedVegan, vegetarian and gluten-free dishes are marked clearly on every menu.
FixedThousands of guests already trust us, and we work hard to keep it that way.

v2.9 Jun 23, 2026

NewOur menu changes with the seasons and the best produce from nearby farms.
ImprovedEvery dish is cooked to order, so tell us if you would like anything changed.
FixedEvery detail is handled by people who care about getting it right.

<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">Apr 25, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our team has done this many times, so you never have to guess.</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>Every detail is handled by people who care about getting it right.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jun 12, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clear prices, honest advice and no surprises along the way.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Order for pickup or delivery and enjoy the same dishes at home.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We listen first, then build a plan around what you actually need.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Mar 9, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We measure success by how many guests come back and tell their friends.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Thousands of guests already trust us, and we work hard to keep it that way.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Jun 23, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our menu changes with the seasons and the best produce from nearby farms.</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>Every detail is handled by people who care about getting it right.</li>
        </ul>
      </div>
    </div>
  </div>
</div>