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

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. Children are always welcome, with a menu made just for them. We measure success by how many guests come back and tell their friends.

Our sommelier has paired each dish with wines from small family vineyards. 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. We keep things simple, so you can focus on what matters to you.

Details

Private dining rooms seat up to forty guests for birthdays and business dinners. 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. Thousands of guests already trust us, and we work hard to keep it that way.

Bread is baked every morning and pasta is rolled by hand in our kitchen. Our terrace is open from spring to autumn, with heaters for cooler evenings. Order for pickup or delivery and enjoy the same dishes at home. Every detail is handled by people who care about getting it right.

Pricing

Clear prices, honest advice and no surprises along the way. 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. 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. Clear prices, honest advice and no surprises along the way. 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="#">Koraara Deck</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">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. Children are always welcome, with a menu made just for them. We measure success by how many guests come back and tell their friends.</p>
    <p class="small">Our sommelier has paired each dish with wines from small family vineyards. 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. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</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. 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">Bread is baked every morning and pasta is rolled by hand in our kitchen. Our terrace is open from spring to autumn, with heaters for cooler evenings. Order for pickup or delivery and enjoy the same dishes at home. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. 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. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
    <p class="small">We measure success by how many guests come back and tell their friends. Clear prices, honest advice and no surprises along the way. 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

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

Step two

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. 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. Every dish is cooked to order, so tell us if you would like anything changed.

Step three

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

Step four

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

<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. Children are always welcome, with a menu made just for them. Our sommelier has paired each dish with wines from small family vineyards.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. 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. 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">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. Friendly people answer your questions quickly, by phone, chat or email. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</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. Our menu changes with the seasons and the best produce from nearby farms.</p>
  </div>
</div>

3Vertical pills

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

Wine pairing

Every detail is handled by people who care about getting it right. Cooking classes on Saturday mornings teach you our favourite recipes. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.

Dine-in

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

Private events

We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it. Book a table online in seconds, or call us for groups of eight or more.

Questions

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. 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-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Wine pairing</a><a class="nav-link" href="#spy-1132">Dine-in</a><a class="nav-link" href="#spy-1133">Private events</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">Wine pairing</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Cooking classes on Saturday mornings teach you our favourite recipes. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Dine-in</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Cooking classes on Saturday mornings teach you our favourite recipes. Every dish is cooked to order, so tell us if you would like anything changed.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Private events</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it. Book a table online in seconds, or call us for groups of eight or more.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">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. Our sommelier has paired each dish with wines from small family vineyards.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

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

Install

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. Order for pickup or delivery and enjoy the same dishes at home. Children are always welcome, with a menu made just for them.

Configure

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

Usage

Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.

Examples

Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. 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-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 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. 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">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. Order for pickup or delivery and enjoy the same dishes at home. Children are always welcome, with a menu made just for them.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Our sommelier has paired each dish with wines from small family vineyards.</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

Cooking classes on Saturday mornings teach you our favourite recipes. Our terrace is open from spring to autumn, with heaters for cooler evenings. Bread is baked every morning and pasta is rolled by hand in our kitchen.

Midday

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

Afternoon

Our menu changes with the seasons and the best produce from nearby farms. Friendly people answer your questions quickly, by phone, chat or email. 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.

Evening

Every dish is cooked to order, so tell us if you would like anything changed. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-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">Cooking classes on Saturday mornings teach you our favourite recipes. Our terrace is open from spring to autumn, with heaters for cooler evenings. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Children are always welcome, with a menu made just for them. 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-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Friendly people answer your questions quickly, by phone, chat or email. Private dining rooms seat up to forty guests for birthdays and business dinners. Thousands of guests already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Every dish is cooked to order, so tell us if you would like anything changed. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We have been feeding this neighbourhood for over a decade, and we still love it. We keep things simple, so you can focus on what matters to you.

Beta

Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. 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.

Gamma

Order for pickup or delivery and enjoy the same dishes at home. Bread is baked every morning and pasta is rolled by hand in our kitchen. We listen first, then build a plan around what you actually need.

<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">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We have been feeding this neighbourhood for over a decade, and we still love it. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right. 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-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Bread is baked every morning and pasta is rolled by hand in our kitchen. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

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

Features

Children are always welcome, with a menu made just for them. We have been feeding this neighbourhood for over a decade, and we still love it. Start in minutes and get help from a real person whenever you need it.

Reviews

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

FAQ

Our menu changes with the seasons and the best produce from nearby farms. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our team has done this many times, so you never have to guess. We measure success by how many guests come back and tell their friends.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
  <a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-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 sommelier has paired each dish with wines from small family vineyards. Our terrace is open from spring to autumn, with heaters for cooler evenings. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Children are always welcome, with a menu made just for them. We have been feeding this neighbourhood for over a decade, and we still love it. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. 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">Our menu changes with the seasons and the best produce from nearby farms. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our team has done this many times, so you never have to guess. We measure success by how many guests come back and tell their friends.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Our terrace is open from spring to autumn, with heaters for cooler evenings. Children are always welcome, with a menu made just for them. Our sommelier has paired each dish with wines from small family vineyards. We listen first, then build a plan around what you actually need.

Background

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

Method

We keep things simple, so you can focus on what matters to you. We have been feeding this neighbourhood for over a decade, and we still love it. Bread is baked every morning and pasta is rolled by hand in our kitchen.

Results

Book a table online in seconds, or call us for groups of eight or more. We measure success by how many guests come back and tell their friends. Cooking classes on Saturday mornings teach you our favourite recipes. Our menu changes with the seasons and the best produce from nearby farms.

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">Our terrace is open from spring to autumn, with heaters for cooler evenings. Children are always welcome, with a menu made just for them. 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-1157" class="pb-3">
        <h3 class="h6">Background</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. Order for pickup or delivery and enjoy the same dishes at home.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. We have been feeding this neighbourhood for over a decade, and we still love it. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Book a table online in seconds, or call us for groups of eight or more. We measure success by how many guests come back and tell their friends. 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 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

Private dining rooms seat up to forty guests for birthdays and business dinners. Our team has done this many times, so you never have to guess. 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.

Set up your profile

Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Order for pickup or delivery and enjoy the same dishes at home.

Invite the team

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

Go live

We measure success by how many guests come back and tell their friends. Private dining rooms seat up to forty guests for birthdays and business dinners. 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.

<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">Private dining rooms seat up to forty guests for birthdays and business dinners. Our team has done this many times, so you never have to guess. 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.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email. 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 id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Every dish is cooked to order, so tell us if you would like anything changed. Our terrace is open from spring to autumn, with heaters for cooler evenings. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">We measure success by how many guests come back and tell their friends. Private dining rooms seat up to forty guests for birthdays and business dinners. 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>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Our favourite tips for busy weeks

Our sommelier has paired each dish with wines from small family vineyards. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.

2024

The small habits that make a big difference

Every detail is handled by people who care about getting it right. Cooking classes on Saturday mornings teach you our favourite recipes. 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.

2025

Looking back at a busy season

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. Clear prices, honest advice and no surprises along the way. Thousands of guests already trust us, and we work hard to keep it that way.

2026

What our guests asked us most

Children are always welcome, with a menu made just for them. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.

<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">Our favourite tips for busy weeks</h3>
    <p class="small mb-0">Our sommelier has paired each dish with wines from small family vineyards. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.</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">The small habits that make a big difference</h3>
    <p class="small mb-0">Every detail is handled by people who care about getting it right. Cooking classes on Saturday mornings teach you our favourite recipes. 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-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">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. Clear prices, honest advice and no surprises along the way. Thousands of guests already trust us, and we work hard to keep it that way.</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 our guests asked us most</h3>
    <p class="small mb-0">Children are always welcome, with a menu made just for them. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

The story of our wood-fired oven?: Bread is baked every morning and pasta is rolled by hand in our kitchen.
Our chef's guide to seasonal autumn produce?: We have been feeding this neighbourhood for over a decade, and we still love it.
Meet the farmers behind our menu?: Order for pickup or delivery and enjoy the same dishes at home.

Shipping

Five wines to pair with a summer dinner?: Every detail is handled by people who care about getting it right.
How to choose the right dish?: Private dining rooms seat up to forty guests for birthdays and business dinners.
Our chocolate tart, step by step?: We keep things simple, so you can focus on what matters to you.

Returns

A beginner's guide to getting started?: Our sommelier has paired each dish with wines from small family vineyards.
Three pasta shapes to make at home?: Cooking classes on Saturday mornings teach you our favourite recipes.
How we make our sourdough every morning?: Every dish is cooked to order, so tell us if you would like anything changed.

<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-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">The story of our wood-fired oven?</dt>
          <dd class="small text-body-secondary">Bread is baked every morning and pasta is rolled by hand in our kitchen.</dd>
          <dt class="small">Our chef&#39;s guide to seasonal autumn produce?</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">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>
        </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">Five wines to pair with a summer dinner?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">How to choose the right dish?</dt>
          <dd class="small text-body-secondary">Private dining rooms seat up to forty guests for birthdays and business dinners.</dd>
          <dt class="small">Our chocolate tart, step by step?</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-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">Our sommelier has paired each dish with wines from small family vineyards.</dd>
          <dt class="small">Three pasta shapes to make at home?</dt>
          <dd class="small text-body-secondary">Cooking classes on Saturday mornings teach you our favourite recipes.</dd>
          <dt class="small">How we make our sourdough every morning?</dt>
          <dd class="small text-body-secondary">Every dish is cooked to order, so tell us if you would like anything changed.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

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

Battery

Our menu changes with the seasons and the best produce from nearby farms. Friendly people answer your questions quickly, by phone, chat or email. Our terrace is open from spring to autumn, with heaters for cooler evenings. Book a table online in seconds, or call us for groups of eight or more.

Connectivity

Children are always welcome, with a menu made just for them. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.

Security

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. 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-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-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">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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Friendly people answer your questions quickly, by phone, chat or email. Our terrace is open from spring to autumn, with heaters for cooler evenings. Book a table online in seconds, or call us for groups of eight or more.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Children are always welcome, with a menu made just for them. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">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. We keep things simple, so you can focus on what matters to you.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$9.19 / mo

Fast delivery
Online reservations
Vegan options

Team

$47.50 / mo

Online reservations
Vegan options
Local ingredients

Business

$75.66 / mo

Chef's specials
Vegan options
Chef's specials

<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">$9.19<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Fast delivery</li>
        <li>Online reservations</li>
        <li>Vegan options</li>
      </ul>
    </div>
  </div>
  <div id="spy-1181" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Team</h3>
      <p class="fs-4 fw-bold mb-1">$47.50<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Online reservations</li>
        <li>Vegan options</li>
        <li>Local ingredients</li>
      </ul>
    </div>
  </div>
  <div id="spy-1182" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Business</h3>
      <p class="fs-4 fw-bold mb-1">$75.66<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Chef&#39;s specials</li>
        <li>Vegan options</li>
        <li>Chef&#39;s specials</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Five things we learned this year

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. Children are always welcome, with a menu made just for them. Our sommelier has paired each dish with wines from small family vineyards.

Order for pickup or delivery and enjoy the same dishes at home. Every detail is handled by people who care about getting it right. Bread is baked every morning and pasta is rolled by hand in our kitchen. Book a table online in seconds, or call us for groups of eight or more.

Chapter 2: What is new on our winter menu

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

Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our team has done this many times, so you never have to guess.

Chapter 3: Planning the perfect birthday dinner

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

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. Clear prices, honest advice and no surprises along the way. Order for pickup or delivery and enjoy the same dishes at home.

Chapter 4: Vegan dishes worth crossing town for

Friendly people answer your questions quickly, by phone, chat or email. 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. 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. Cooking classes on Saturday mornings teach you our favourite recipes. 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: Five things we learned this year</h3>
    <p class="small">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. Children are always welcome, with a menu made just for them. Our sommelier has paired each dish with wines from small family vineyards.</p>
    <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Every detail is handled by people who care about getting it right. Bread is baked every morning and pasta is rolled by hand in our kitchen. Book a table online in seconds, or call us for groups of eight or more.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: What is new on our winter menu</h3>
    <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. 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>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Planning the perfect birthday dinner</h3>
    <p class="small">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. 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>
    <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. Clear prices, honest advice and no surprises along the way. Order for pickup or delivery and enjoy the same dishes at home.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Vegan dishes worth crossing town for</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. Thousands of guests already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need.</p>
    <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 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. Bread is baked every morning and pasta is rolled by hand in our kitchen. Our terrace is open from spring to autumn, with heaters for cooler evenings.

Notifications

Product news

Weekly digest

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our team has done this many times, so you never have to guess. Our sommelier has paired each dish with wines from small family vineyards.

Privacy

Hide my profile from search

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

<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="Ruby Varga">
        </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="Auckland">
        </div>
        <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. Our terrace is open from spring to autumn, with heaters for cooler evenings.</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">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our team has done this many times, so you never have to guess. Our sommelier has paired each dish with wines from small family vineyards.</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 menu changes with the seasons and the best produce from nearby farms. Our sommelier has paired each dish with wines from small family vineyards. Book a table online in seconds, or call us for groups of eight or more.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Legal

Ava Mensah
Support Specialist
Zoe Sato
Product Designer
Ella Whitaker
Backend Engineer

Sales

Theo Harlow
Finance Lead
Omar Carter
Customer Success
Felix Delgado
Product Designer

Operations

Kenji Fischer
Backend Engineer
Sofia Ibrahim
Backend Engineer
Samir Haddad
Project Manager

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Legal</a><a class="nav-link" href="#spy-1199">Sales</a><a class="nav-link" href="#spy-1200">Operations</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">Legal</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="Ava Mensah"><div><div class="small fw-semibold">Ava Mensah</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-12.svg" class="rounded-circle" width="36" height="36" alt="Zoe Sato"><div><div class="small fw-semibold">Zoe Sato</div><div class="small text-body-secondary">Product Designer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Ella Whitaker"><div><div class="small fw-semibold">Ella Whitaker</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Sales</h3>
    <ul class="list-unstyled">
      <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="Theo Harlow"><div><div class="small fw-semibold">Theo Harlow</div><div class="small text-body-secondary">Finance Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Omar Carter"><div><div class="small fw-semibold">Omar Carter</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="Felix Delgado"><div><div class="small fw-semibold">Felix Delgado</div><div class="small text-body-secondary">Product Designer</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-6.svg" class="rounded-circle" width="36" height="36" alt="Kenji Fischer"><div><div class="small fw-semibold">Kenji Fischer</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-6.svg" class="rounded-circle" width="36" height="36" alt="Sofia Ibrahim"><div><div class="small fw-semibold">Sofia 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-4.svg" class="rounded-circle" width="36" height="36" alt="Samir Haddad"><div><div class="small fw-semibold">Samir Haddad</div><div class="small text-body-secondary">Project Manager</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Mains

Truffle pasta$26.00
Lemon tiramisu$11.00
Chocolate tart$9.00

Specials

Truffle pasta$26.00
Garden salad$13.00
Espresso martini$12.00

Drinks

Chocolate tart$9.00
Chef's tasting plate$43.99
Espresso martini$11.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">Specials</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-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>Truffle pasta</span><span class="fw-semibold">$26.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>Chocolate tart</span><span class="fw-semibold">$9.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Specials</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Truffle pasta</span><span class="fw-semibold">$26.00</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>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Espresso martini</span><span class="fw-semibold">$12.00</span></li>
    </ul>
  </div>
  <div id="spy-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>Chocolate tart</span><span class="fw-semibold">$9.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Chef&#39;s tasting plate</span><span class="fw-semibold">$43.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Espresso martini</span><span class="fw-semibold">$11.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Clear prices, honest advice and no surprises along the way. Our menu changes with the seasons and the best produce from nearby farms. Every detail is handled by people who care about getting it right.

This week

Order for pickup or delivery and enjoy the same dishes at home. Private dining rooms seat up to forty guests for birthdays and business dinners. We measure success by how many guests come back and tell their friends.

Later

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Cooking classes on Saturday mornings teach you our favourite recipes. Our team has done this many times, so you never have to guess.

<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">Clear prices, honest advice and no surprises along the way. Our menu changes with the seasons and the best produce from nearby farms. Every detail is handled by people who care about getting it right.</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. 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-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Cooking classes on Saturday mornings teach you our favourite recipes. Our team has done this many times, so you never have to guess.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

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

Orbit

Bread is baked every morning and pasta is rolled by hand in our kitchen. We have been feeding this neighbourhood for over a decade, and we still love it. Friendly people answer your questions quickly, by phone, chat or email.

Landing

Every dish is cooked to order, so tell us if you would like anything changed. Children are always welcome, with a menu made just for them. Our terrace is open from spring to autumn, with heaters for cooler evenings.

<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">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. 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.</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. We have been feeding this neighbourhood for over a decade, and we still love it. Friendly people answer your questions quickly, by phone, chat or email.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Every dish is cooked to order, so tell us if you would like anything changed. Children are always welcome, with a menu made just for them. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Sep 28, 2026

NewWe have been feeding this neighbourhood for over a decade, and we still love it.
ImprovedOrder for pickup or delivery and enjoy the same dishes at home.
FixedOur menu changes with the seasons and the best produce from nearby farms.

v3.1 Oct 9, 2025

NewStart in minutes and get help from a real person whenever you need it.
ImprovedBread is baked every morning and pasta is rolled by hand in our kitchen.
FixedThousands of guests already trust us, and we work hard to keep it that way.

v3.0 Jun 28, 2026

NewWe keep things simple, so you can focus on what matters to you.
ImprovedWe measure success by how many guests come back and tell their friends.
FixedCooking classes on Saturday mornings teach you our favourite recipes.

v2.9 Oct 4, 2025

NewClear prices, honest advice and no surprises along the way.
ImprovedOur team has done this many times, so you never have to guess.
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-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">Sep 28, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We have been feeding this neighbourhood for over a decade, and we still love it.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>Our menu changes with the seasons and the best produce from nearby farms.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Oct 9, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Start in minutes and get help from a real person whenever you need it.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Bread is baked every morning and pasta is rolled by hand in our kitchen.</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-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Jun 28, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We measure success by how many guests come back and tell their friends.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Cooking classes on Saturday mornings teach you our favourite recipes.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Oct 4, 2025</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>Our team has done this many times, so you never have to guess.</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>