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-bs-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.

1In a navbar

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

Intro

We 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. Friendly people answer your questions quickly, by phone, chat or email. 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. Our team has done this many times, so you never have to guess. Cooking classes on Saturday mornings teach you our favourite recipes. Bread is baked every morning and pasta is rolled by hand in our kitchen.

Details

Order for pickup or delivery and enjoy the same dishes at home. We listen first, then build a plan around what you actually need. Book a table online in seconds, or call us for groups of eight or more. Children are always welcome, with a menu made just for them.

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

Pricing

Private dining rooms seat up to forty guests for birthdays and business dinners. We keep things simple, so you can focus on what matters to you. 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. Order for pickup or delivery and enjoy the same dishes at home. 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.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Wrenora</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-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1121" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1122" class="pb-3">
    <h3 class="h6">Intro</h3>
    <p class="small">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. Friendly people answer your questions quickly, by phone, chat or email. Every dish is cooked to order, so tell us if you would like anything changed.</p>
    <p class="small">Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess. 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-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Order for pickup or delivery and enjoy the same dishes at home. We listen first, then build a plan around what you actually need. Book a table online in seconds, or call us for groups of eight or more. Children are always welcome, with a menu made just for them.</p>
    <p class="small">Thousands of guests already trust us, and we work hard to keep it that way. Our sommelier has paired each dish with wines from small family vineyards. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right.</p>
    <p class="small">We keep things simple, so you can focus on what matters to you. Order for pickup or delivery and enjoy the same dishes at home. 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>

2Horizontal pills

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

Step one

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

Step two

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. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.

Step three

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

Step four

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

<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-bs-spy="scroll" data-bs-target="#spy-nav-1125" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1126" class="pb-3">
    <h3 class="h6">Step one</h3>
    <p class="small">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. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">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. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">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. Children are always welcome, with a menu made just for them.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</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. Thousands of guests already trust us, and we work hard to keep it that way.</p>
  </div>
</div>

3Vertical pills

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

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

Cooking classes

Our terrace is open from spring to autumn, with heaters for cooler evenings. 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. We measure success by how many guests come back and tell their friends.

Takeaway

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

Questions

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. Order for pickup or delivery and enjoy the same dishes at home.

<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">Catering</a><a class="nav-link" href="#spy-1132">Cooking classes</a><a class="nav-link" href="#spy-1133">Takeaway</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-bs-spy="scroll" data-bs-target="#spy-nav-1130" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" 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. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Cooking classes</h3>
        <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. 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. We measure success by how many guests come back and tell their friends.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Takeaway</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. Our sommelier has paired each dish with wines from small family vineyards.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">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. Order for pickup or delivery and enjoy the same dishes at home.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.

Install

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

Configure

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. Friendly people answer your questions quickly, by phone, chat or email. Cooking classes on Saturday mornings teach you our favourite recipes.

Usage

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

Examples

Friendly people answer your questions quickly, by phone, chat or email. Our menu changes with the seasons and the best produce from nearby farms. Every dish is cooked to order, so tell us if you would like anything changed. We keep things simple, so you can focus on what matters to you.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1135" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</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. Friendly people answer your questions quickly, by phone, chat or email. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">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. Thousands of guests already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our menu changes with the seasons and the best produce from nearby farms. Every dish is cooked to order, so tell us if you would like anything changed. We keep things simple, so you can focus on what matters to you.</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

Our terrace is open from spring to autumn, with heaters for cooler evenings. Clear prices, honest advice and no surprises along the way. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Children are always welcome, with a menu made just for them.

Midday

Start in minutes and get help from a real person whenever you need it. Cooking classes on Saturday mornings teach you our favourite recipes. We measure success by how many guests come back and tell their friends.

Afternoon

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

Evening

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

<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-bs-spy="scroll" data-bs-target="#spy-nav-1141" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. Clear prices, honest advice and no surprises along the way. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Children are always welcome, with a menu made just for them.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</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. We measure success by how many guests come back and tell their friends.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">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. 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>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">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. Book a table online in seconds, or call us for groups of eight or more. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

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.

Beta

Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. Order for pickup or delivery and enjoy the same dishes at home.

Gamma

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

<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-bs-spy="scroll" data-bs-target="#spy-nav-1146" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">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.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you. Order for pickup or delivery and enjoy the same dishes at home.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

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

Features

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

Reviews

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

FAQ

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

<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-bs-spy="scroll" data-bs-target="#spy-nav-1150" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</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. Children are always welcome, with a menu made just for them.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</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. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">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. Book a table online in seconds, or call us for groups of eight or more.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Cooking classes on Saturday mornings teach you our favourite recipes. 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>
  </div>
</div>

8Table of contents on the right

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

Summary

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

Background

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

Method

Friendly people answer your questions quickly, by phone, chat or email. 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. Private dining rooms seat up to forty guests for birthdays and business dinners.

Results

Our sommelier has paired each dish with wines from small family vineyards. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need.

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-bs-spy="scroll" data-bs-target="#spy-nav-1155" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">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. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Clear prices, honest advice and no surprises along the way. Book a table online in seconds, or call us for groups of eight or more. Children are always welcome, with a menu made just for them.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Our sommelier has paired each dish with wines from small family vineyards. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first order-md-last">
    <p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-column small">
      <a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
    </nav>
  </div>
</div>

9Numbered steps

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

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

Create an account

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

Set up your profile

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

Invite the team

We listen first, then build a plan around what you actually need. 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. Our menu changes with the seasons and the best produce from nearby farms.

Go live

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

<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-bs-spy="scroll" data-bs-target="#spy-nav-1160" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</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. Every dish is cooked to order, so tell us if you would like anything changed.</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. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.</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. 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. Our menu changes with the seasons and the best produce from nearby farms.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Five things we learned this year

We keep things simple, so you can focus on what matters to you. 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. Children are always welcome, with a menu made just for them.

2024

How we make our sourdough every morning

Bread is baked every morning and pasta is rolled by hand in our kitchen. Private dining rooms seat up to forty guests for birthdays and business dinners. Cooking classes on Saturday mornings teach you our favourite recipes.

2025

Looking back at a busy season

Book a table online in seconds, or call us for groups of eight or more. Order for pickup or delivery and enjoy the same dishes at home. We measure success by how many guests come back and tell their friends.

2026

What is new on our winter menu

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

<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-bs-spy="scroll" data-bs-target="#spy-nav-1165" data-bs-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 things we learned this year</h3>
    <p class="small mb-0">We keep things simple, so you can focus on what matters to you. 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. Children are always welcome, with a menu made just for them.</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">How we make our sourdough every morning</h3>
    <p class="small mb-0">Bread is baked every morning and pasta is rolled by hand in our kitchen. 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 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">Looking back at a busy season</h3>
    <p class="small mb-0">Book a table online in seconds, or call us for groups of eight or more. Order for pickup or delivery and enjoy the same dishes at home. We measure success by how many guests come back and tell their friends.</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">What is new on our winter menu</h3>
    <p class="small mb-0">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. 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>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Three pasta shapes to make at home?: Bread is baked every morning and pasta is rolled by hand in our kitchen.
Our chocolate tart, step by step?: Children are always welcome, with a menu made just for them.
Vegan dishes worth crossing town for?: Clear prices, honest advice and no surprises along the way.

Shipping

Planning the perfect birthday dinner?: Book a table online in seconds, or call us for groups of eight or more.
Five wines to pair with a summer dinner?: We have been feeding this neighbourhood for over a decade, and we still love it.
The small habits that make a big difference?: We keep things simple, so you can focus on what matters to you.

Returns

Meet the farmers behind our menu?: Order for pickup or delivery and enjoy the same dishes at home.
What our guests asked us most?: Every detail is handled by people who care about getting it right.
A beginner's guide to getting started?: Private dining rooms seat up to forty guests for birthdays and business dinners.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1170" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">Three pasta shapes to make at home?</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">Our chocolate tart, step by step?</dt>
          <dd class="small text-body-secondary">Children are always welcome, with a menu made just for them.</dd>
          <dt class="small">Vegan dishes worth crossing town for?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">Planning the perfect birthday dinner?</dt>
          <dd class="small text-body-secondary">Book a table online in seconds, or call us for groups of eight or more.</dd>
          <dt class="small">Five wines to pair with a summer dinner?</dt>
          <dd class="small text-body-secondary">We have been feeding this neighbourhood for over a decade, and we still love it.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Meet the farmers behind our menu?</dt>
          <dd class="small text-body-secondary">Order for pickup or delivery and enjoy the same dishes at home.</dd>
          <dt class="small">What our guests asked us most?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">Private dining rooms seat up to forty guests for birthdays and business dinners.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Start in minutes and get help from a real person whenever you need it. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Friendly people answer your questions quickly, by phone, chat or email.

Battery

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. Every dish is cooked to order, so tell us if you would like anything changed. Cooking classes on Saturday mornings teach you our favourite recipes.

Connectivity

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

Security

Private dining rooms seat up to forty guests for birthdays and business dinners. Our sommelier has paired each dish with wines from small family vineyards. 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.

<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" 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-bs-spy="scroll" data-bs-target="#spy-nav-1174" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Thousands of guests already trust us, and we work hard to keep it that way. We measure success by how many guests come back and tell their friends. Every dish is cooked to order, so tell us if you would like anything changed. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</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. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. Our sommelier has paired each dish with wines from small family vineyards. 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>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$14.30 / mo

Fast delivery
Online reservations
Fast delivery

Team

$49.01 / mo

Vegan options
Fast delivery
Chef's specials

Business

$78.77 / mo

Online reservations
Vegan options
Kid friendly

<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-bs-spy="scroll" data-bs-target="#spy-nav-1179" data-bs-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">$14.30<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Fast delivery</li>
        <li>Online reservations</li>
        <li>Fast delivery</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">$49.01<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Vegan options</li>
        <li>Fast delivery</li>
        <li>Chef&#39;s specials</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">$78.77<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Online reservations</li>
        <li>Vegan options</li>
        <li>Kid friendly</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

Our terrace is open from spring to autumn, with heaters for cooler evenings. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.

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

Chapter 2: Our favourite tips for busy weeks

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

Chapter 3: The story of our wood-fired oven

Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. 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. 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.

Chapter 4: Our chef's guide to seasonal autumn produce

Order for pickup or delivery and enjoy the same dishes at home. Every detail is handled by people who care about getting it right. 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.

Cooking classes on Saturday mornings teach you our favourite recipes. Friendly people answer your questions quickly, by phone, chat or email. Book a table online in seconds, or call us for groups of eight or more. We keep things simple, so you can focus on what matters to you.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1183" data-bs-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">Our terrace is open from spring to autumn, with heaters for cooler evenings. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.</p>
    <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. Thousands of guests already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: Our favourite tips for busy weeks</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
    <p class="small">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. 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-1186" class="pb-3">
    <h3 class="h6">Chapter 3: The story of our wood-fired oven</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need.</p>
    <p class="small">Thousands of guests already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Our chef&#39;s guide to seasonal autumn produce</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. 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">Cooking classes on Saturday mornings teach you our favourite recipes. Friendly people answer your questions quickly, by phone, chat or email. Book a table online in seconds, or call us for groups of eight or more. We keep things simple, so you can focus on what matters to you.</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. Our sommelier has paired each dish with wines from small family vineyards. Clear prices, honest advice and no surprises along the way.

Notifications

Product news

Weekly digest

We have been feeding this neighbourhood for over a decade, and we still love it. Our terrace is open from spring to autumn, with heaters for cooler evenings. We measure success by how many guests come back and tell their friends.

Privacy

Hide my profile from search

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

<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-bs-spy="scroll" data-bs-target="#spy-nav-1188" data-bs-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="Liam Moreau">
        </div>
        <div class="mb-2">
          <label for="spy-in-1193" class="form-label small">City</label>
          <input class="form-control form-control-sm" id="spy-in-1193" value="Kyoto">
        </div>
        <p class="small">Children are always welcome, with a menu made just for them. Our sommelier has paired each dish with wines from small family vineyards. Clear prices, honest advice and no surprises along the way.</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">We have been feeding this neighbourhood for over a decade, and we still love it. Our terrace is open from spring to autumn, with heaters for cooler evenings. We measure success by how many guests come back and tell their friends.</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">Our team has done this many times, so you never have to guess. 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.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Finance

Felix Ashford
Marketing Lead
Leo Larsen
HR Partner
Kai Okafor
Finance Lead

Operations

Diego Quinn
QA Engineer
Jonah Nguyen
Customer Success
Amara Morgan
Backend Engineer

Human Resources

Freya Alvarez
Content Writer
Ava Kowalski
Operations Manager
Arjun Hughes
Finance Lead

<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">Human Resources</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1197" data-bs-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-5.svg" class="rounded-circle" width="36" height="36" alt="Felix Ashford"><div><div class="small fw-semibold">Felix Ashford</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Leo Larsen"><div><div class="small fw-semibold">Leo Larsen</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-6.svg" class="rounded-circle" width="36" height="36" alt="Kai Okafor"><div><div class="small fw-semibold">Kai Okafor</div><div class="small text-body-secondary">Finance Lead</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-2.svg" class="rounded-circle" width="36" height="36" alt="Diego Quinn"><div><div class="small fw-semibold">Diego Quinn</div><div class="small text-body-secondary">QA Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Jonah Nguyen"><div><div class="small fw-semibold">Jonah Nguyen</div><div class="small text-body-secondary">Customer Success</div></div></li>
      <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="Amara Morgan"><div><div class="small fw-semibold">Amara Morgan</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Human Resources</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="Freya Alvarez"><div><div class="small fw-semibold">Freya Alvarez</div><div class="small text-body-secondary">Content Writer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Ava Kowalski"><div><div class="small fw-semibold">Ava Kowalski</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-4.svg" class="rounded-circle" width="36" height="36" alt="Arjun Hughes"><div><div class="small fw-semibold">Arjun Hughes</div><div class="small text-body-secondary">Finance Lead</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Mains

Garden salad$12.00
Chocolate tart$9.00
Seasonal soup$9.00

Drinks

Slow-cooked lamb$34.00
Truffle pasta$25.99
Grilled salmon$24.99

Desserts

Lemon tiramisu$10.00
Chocolate tart$10.00
House lemonade$5.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Mains</a><a class="nav-link" href="#spy-1203">Drinks</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-bs-spy="scroll" data-bs-target="#spy-nav-1201" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-3">
    <h3 class="h6">Mains</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Garden salad</span><span class="fw-semibold">$12.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Chocolate tart</span><span class="fw-semibold">$9.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Seasonal soup</span><span class="fw-semibold">$9.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" 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>Slow-cooked lamb</span><span class="fw-semibold">$34.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Truffle pasta</span><span class="fw-semibold">$25.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Grilled salmon</span><span class="fw-semibold">$24.99</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>Lemon tiramisu</span><span class="fw-semibold">$10.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>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>House lemonade</span><span class="fw-semibold">$5.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

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

This week

Order for pickup or delivery and enjoy the same dishes at home. 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. Every dish is cooked to order, so tell us if you would like anything changed.

Later

Children are always welcome, with a menu made just for them. Our sommelier has paired each dish with wines from small family vineyards. Cooking classes on Saturday mornings teach you our favourite recipes.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1205" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">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. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Order for pickup or delivery and enjoy the same dishes at home. 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. Every dish is cooked to order, so tell us if you would like anything changed.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Children are always welcome, with a menu made just for them. Our sommelier has paired each dish with wines from small family vineyards. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

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. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.

Orbit

Thousands of guests already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.

Landing

Every detail is handled by people who care about getting it right. We measure success by how many guests come back and tell their friends. Bread is baked every morning and pasta is rolled by hand in our kitchen.

<div data-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1209" data-bs-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">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. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Thousands of guests already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Every detail is handled by people who care about getting it right. We measure success by how many guests come back and tell their friends. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Feb 6, 2026

NewOur team has done this many times, so you never have to guess.
ImprovedWe have been feeding this neighbourhood for over a decade, and we still love it.
FixedWe listen first, then build a plan around what you actually need.

v3.1 Jul 30, 2026

NewThousands of guests already trust us, and we work hard to keep it that way.
ImprovedWe keep things simple, so you can focus on what matters to you.
FixedFriendly people answer your questions quickly, by phone, chat or email.

v3.0 Oct 26, 2025

NewOur team has done this many times, so you never have to guess.
ImprovedWe have been feeding this neighbourhood for over a decade, and we still love it.
FixedBook a table online in seconds, or call us for groups of eight or more.

v2.9 Feb 4, 2026

NewChildren are always welcome, with a menu made just for them.
ImprovedOur menu changes with the seasons and the best produce from nearby farms.
FixedStart in minutes and get help from a real person whenever you need it.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1213" data-bs-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 6, 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>We have been feeding this neighbourhood for over a decade, and we still love it.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We listen first, then build a plan around what you actually need.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jul 30, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of guests already trust us, and we work hard to keep it that way.</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>Friendly people answer your questions quickly, by phone, chat or email.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Oct 26, 2025</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>We have been feeding this neighbourhood for over a decade, and we still love it.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Book a table online in seconds, or call us for groups of eight or more.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Feb 4, 2026</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>Our menu changes with the seasons and the best produce from nearby farms.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Start in minutes and get help from a real person whenever you need it.</li>
        </ul>
      </div>
    </div>
  </div>
</div>