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 measure success by how many guests come back and tell their friends. Children are always welcome, with a menu made just for them. Clear prices, honest advice and no surprises along the way.

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

Details

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

Every dish is cooked to order, so tell us if you would like anything changed. Our team has done this many times, so you never have to guess. Our sommelier has paired each dish with wines from small family vineyards.

Pricing

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

Our terrace is open from spring to autumn, with heaters for cooler evenings. 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. Every dish is cooked to order, so tell us if you would like anything changed.

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

2Horizontal pills

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

Step one

Our menu changes with the seasons and the best produce from nearby farms. Private dining rooms seat up to forty guests for birthdays and business dinners. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.

Step two

Every detail is handled by people who care about getting it right. Book a table online in seconds, or call us for groups of eight or more. 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.

Step three

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

Step four

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. Clear prices, honest advice and no surprises along the 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">Our menu changes with the seasons and the best produce from nearby farms. Private dining rooms seat up to forty guests for birthdays and business dinners. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Book a table online in seconds, or call us for groups of eight or more. 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 id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">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. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Clear prices, honest advice and no surprises along the way.</p>
  </div>
</div>

3Vertical pills

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

Catering

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

Private events

Children are always welcome, with a menu made just for them. Cooking classes on Saturday mornings teach you our favourite recipes. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.

Cooking classes

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

Questions

We have been feeding this neighbourhood for over a decade, and we still love it. Bread is baked every morning and pasta is rolled by hand in our kitchen. Our terrace is open from spring to autumn, with heaters for cooler evenings. Children are always welcome, with a menu made just for them.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Catering</a><a class="nav-link" href="#spy-1132">Private events</a><a class="nav-link" href="#spy-1133">Cooking classes</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 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. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Private events</h3>
        <p class="small">Children are always welcome, with a menu made just for them. Cooking classes on Saturday mornings teach you our favourite recipes. Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Cooking classes</h3>
        <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. 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.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. Bread is baked every morning and pasta is rolled by hand in our kitchen. Our terrace is open from spring to autumn, with heaters for cooler evenings. Children are always welcome, with a menu made just for them.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

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

Install

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

Configure

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. We measure success by how many guests come back and tell their friends. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

Usage

Every detail is handled by people who care about getting it right. 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 listen first, then build a plan around what you actually need.

Examples

Start in minutes and get help from a real person whenever you need it. Our terrace is open from spring to autumn, with heaters for cooler evenings. Clear prices, honest advice and no surprises along the way.

<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">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. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Cooking classes on Saturday mornings teach you our favourite recipes. Every dish is cooked to order, so tell us if you would like anything changed.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Thousands of guests already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. We measure success by how many guests come back and tell their friends. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</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. 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 listen first, then build a plan around what you actually need.</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. Our terrace is open from spring to autumn, with heaters for cooler evenings. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

5List group

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

Morning Midday Afternoon Evening

Morning

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. Our menu changes with the seasons and the best produce from nearby farms. We keep things simple, so you can focus on what matters to you.

Midday

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

Afternoon

Cooking classes on Saturday mornings teach you our favourite recipes. Every detail is handled by people who care about getting it right. We have been feeding this neighbourhood for over a decade, and we still love it.

Evening

Private dining rooms seat up to forty guests for birthdays and business dinners. Children are always welcome, with a menu made just for them. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.

<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">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. Our menu changes with the seasons and the best produce from nearby farms. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Cooking classes on Saturday mornings teach you our favourite recipes. Every detail is handled by people who care about getting it right. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. Children are always welcome, with a menu made just for them. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Our sommelier has paired each dish with wines from small family vineyards. Bread is baked every morning and pasta is rolled by hand in our kitchen. Children are always welcome, with a menu made just for them. We have been feeding this neighbourhood for over a decade, and we still love it.

Beta

Our terrace is open from spring to autumn, with heaters for cooler evenings. 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. Bread is baked every morning and pasta is rolled by hand in our kitchen.

Gamma

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. Cooking classes on Saturday mornings teach you our favourite recipes. 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">Our sommelier has paired each dish with wines from small family vineyards. Bread is baked every morning and pasta is rolled by hand in our kitchen. Children are always welcome, with a menu made just for them. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. 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. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">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. Cooking classes on Saturday mornings teach you our favourite recipes. 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

Order for pickup or delivery and enjoy the same dishes at home. 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. Start in minutes and get help from a real person whenever you need it.

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. Book a table online in seconds, or call us for groups of eight or more. Clear prices, honest advice and no surprises along the way.

Reviews

Friendly people answer your questions quickly, by phone, chat or email. Our menu changes with the seasons and the best produce from nearby farms. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We keep things simple, so you can focus on what matters to you.

FAQ

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

<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">Order for pickup or delivery and enjoy the same dishes at home. 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. Start in minutes and get help from a real person whenever you need it.</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. Book a table online in seconds, or call us for groups of eight or more. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

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

Background

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

Method

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.

Results

We listen first, then build a plan around what you actually need. Order for pickup or delivery and enjoy the same dishes at home. Friendly people answer your questions quickly, by phone, chat or email.

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">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. 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-1157" class="pb-3">
        <h3 class="h6">Background</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. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">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-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Order for pickup or delivery and enjoy the same dishes at home. Friendly people answer your questions quickly, by phone, chat or email.</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

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. Every detail is handled by people who care about getting it right. Our sommelier has paired each dish with wines from small family vineyards.

Set up your profile

Clear prices, honest advice and no surprises along the way. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Every dish is cooked to order, so tell us if you would like anything changed.

Invite the team

We listen first, then build a plan around what you actually need. Children are always welcome, with a menu made just for them. Our menu changes with the seasons and the best produce from nearby farms.

Go live

Thousands of guests already trust us, and we work hard to keep it that way. Our terrace is open from spring to autumn, with heaters for cooler evenings. Our team has done this many times, so you never have to guess. Private dining rooms seat up to forty guests for birthdays and business dinners.

<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">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. Every detail is handled by people who care about getting it right. Our sommelier has paired each dish with wines from small family vineyards.</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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Every dish is cooked to order, so tell us if you would like anything changed.</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. Children are always welcome, with a menu made just for them. 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">Thousands of guests already trust us, and we work hard to keep it that way. Our terrace is open from spring to autumn, with heaters for cooler evenings. Our team has done this many times, so you never have to guess. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

How to choose the right dish

Our sommelier has paired each dish with wines from small family vineyards. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Cooking classes on Saturday mornings teach you our favourite recipes.

2024

Our chef's guide to seasonal autumn produce

Order for pickup or delivery and enjoy the same dishes at home. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many guests come back and tell their friends.

2025

Looking back at a busy season

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

2026

Our favourite tips for busy weeks

Clear prices, honest advice and no surprises along the way. Order for pickup or delivery and enjoy the same dishes at home. Our menu changes with the seasons and the best produce from nearby farms. Our sommelier has paired each dish with wines from small family vineyards.

<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">How to choose the right dish</h3>
    <p class="small mb-0">Our sommelier has paired each dish with wines from small family vineyards. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
  </div>
  <div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">Our chef&#39;s guide to seasonal autumn produce</h3>
    <p class="small mb-0">Order for pickup or delivery and enjoy the same dishes at home. Friendly people answer your questions quickly, by phone, chat or email. We measure success by how many guests come back and tell their friends.</p>
  </div>
  <div id="spy-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">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. 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 id="spy-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">Our favourite tips for busy weeks</h3>
    <p class="small mb-0">Clear prices, honest advice and no surprises along the way. Order for pickup or delivery and enjoy the same dishes at home. Our menu changes with the seasons and the best produce from nearby farms. Our sommelier has paired each dish with wines from small family vineyards.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

The story of our wood-fired oven?: We have been feeding this neighbourhood for over a decade, and we still love it.
Five things we learned this year?: Thousands of guests already trust us, and we work hard to keep it that way.
What is new on our winter menu?: Children are always welcome, with a menu made just for them.

Shipping

Three pasta shapes to make at home?: Start in minutes and get help from a real person whenever you need it.
A beginner's guide to getting started?: Bread is baked every morning and pasta is rolled by hand in our kitchen.
Vegan dishes worth crossing town for?: Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

Returns

What our guests asked us most?: We keep things simple, so you can focus on what matters to you.
Five wines to pair with a summer dinner?: We listen first, then build a plan around what you actually need.
How we make our sourdough every morning?: Book a table online in seconds, or call us for groups of eight or more.

<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">The story of our wood-fired oven?</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">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">Thousands of guests already trust us, and we work hard to keep it that way.</dd>
          <dt class="small">What is new on our winter menu?</dt>
          <dd class="small text-body-secondary">Children are always welcome, with a menu made just for them.</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">Three pasta shapes to make at home?</dt>
          <dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
          <dt class="small">A beginner&#39;s guide to getting started?</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">Vegan dishes worth crossing town for?</dt>
          <dd class="small text-body-secondary">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</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">What our guests asked us most?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
          <dt class="small">Five wines to pair with a summer dinner?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">How we make our sourdough every morning?</dt>
          <dd class="small text-body-secondary">Book a table online in seconds, or call us for groups of eight or more.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Private dining rooms seat up to forty guests for birthdays and business dinners. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Cooking classes on Saturday mornings teach you our favourite recipes.

Battery

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. Our terrace is open from spring to autumn, with heaters for cooler evenings. Every detail is handled by people who care about getting it right.

Connectivity

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

Security

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

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-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">Private dining rooms seat up to forty guests for birthdays and business dinners. Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">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. Our terrace is open from spring to autumn, with heaters for cooler evenings. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Bread is baked every morning and pasta is rolled by hand in our kitchen. 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.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Book a table online in seconds, or call us for groups of eight or more. Our menu changes with the seasons and the best produce from nearby farms. Children are always welcome, with a menu made just for them.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$16.80 / mo

Local ingredients
Online reservations
Chef's specials

Team

$29.73 / mo

Kid friendly
Kid friendly
Vegan options

Business

$60.69 / mo

Fast delivery
Chef's specials
Fast delivery

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

14Chapter reader

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

Chapter 1: Our chocolate tart, step by step

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

Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. We have been feeding this neighbourhood for over a decade, and we still love it.

Chapter 2: The small habits that make a big difference

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

Our terrace is open from spring to autumn, with heaters for cooler evenings. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Every detail is handled by people who care about getting it right.

Chapter 3: Planning the perfect birthday dinner

We keep things simple, so you can focus on what matters to you. Cooking classes on Saturday mornings teach you our favourite recipes. 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.

Private dining rooms seat up to forty guests for birthdays and business dinners. Children are always welcome, with a menu made just for them. We keep things simple, so you can focus on what matters to you.

Chapter 4: Meet the farmers behind our menu

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

Clear prices, honest advice and no surprises along the way. Every dish is cooked to order, so tell us if you would like anything changed. Order for pickup or delivery and enjoy the same dishes at home.

<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: Our chocolate tart, step by step</h3>
    <p class="small">Our sommelier has paired each dish with wines from small family vineyards. We measure success by how many guests come back and tell their friends. We listen first, then build a plan around what you actually need.</p>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: The small habits that make a big difference</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. Thousands of guests already trust us, and we work hard to keep it that way.</p>
    <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Planning the perfect birthday dinner</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Cooking classes on Saturday mornings teach you our favourite recipes. 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>
    <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. Children are always welcome, with a menu made just for them. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Meet the farmers behind our menu</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. We measure success by how many guests come back and tell their friends.</p>
    <p class="small">Clear prices, honest advice and no surprises along the way. Every dish is cooked to order, so tell us if you would like anything changed. Order for pickup or delivery and enjoy the same dishes at home.</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

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. 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. Our sommelier has paired each dish with wines from small family vineyards.

Notifications

Product news

Weekly digest

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

Privacy

Hide my profile from search

Our team has done this many times, so you never have to guess. Thousands of guests already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it.

<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="Priya Fischer">
        </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="Montreal">
        </div>
        <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. Book a table online in seconds, or call us for groups of eight or more. Our sommelier has paired each dish with wines from small family vineyards.</p>
      </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">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. Our terrace is open from spring to autumn, with heaters for cooler evenings.</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. 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.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Finance

Tariq Rossi
Project Manager
Lucas Tanaka
Product Designer
Leo Kowalski
Product Designer

Marketing

Ava Harlow
Product Designer
Ruby Larsen
Art Director
Isla Okafor
Content Writer

Legal

Ivy Kim
Frontend Engineer
Amara Morgan
Content Writer
Hana Delgado
Art Director

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Finance</a><a class="nav-link" href="#spy-1199">Marketing</a><a class="nav-link" href="#spy-1200">Legal</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-7.svg" class="rounded-circle" width="36" height="36" alt="Tariq Rossi"><div><div class="small fw-semibold">Tariq Rossi</div><div class="small text-body-secondary">Project Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Lucas Tanaka"><div><div class="small fw-semibold">Lucas Tanaka</div><div class="small text-body-secondary">Product Designer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Leo Kowalski"><div><div class="small fw-semibold">Leo Kowalski</div><div class="small text-body-secondary">Product Designer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Marketing</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="Ava Harlow"><div><div class="small fw-semibold">Ava Harlow</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-1.svg" class="rounded-circle" width="36" height="36" alt="Ruby Larsen"><div><div class="small fw-semibold">Ruby Larsen</div><div class="small text-body-secondary">Art Director</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Isla Okafor"><div><div class="small fw-semibold">Isla Okafor</div><div class="small text-body-secondary">Content Writer</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-1.svg" class="rounded-circle" width="36" height="36" alt="Ivy Kim"><div><div class="small fw-semibold">Ivy Kim</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Amara Morgan"><div><div class="small fw-semibold">Amara Morgan</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-11.svg" class="rounded-circle" width="36" height="36" alt="Hana Delgado"><div><div class="small fw-semibold">Hana Delgado</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Desserts

House lemonade$5.00
Burrata with tomatoes$15.00
Truffle pasta$25.00

Starters

House lemonade$5.00
Wood-fired pizza$20.00
Burrata with tomatoes$14.00

Specials

Burrata with tomatoes$14.00
Garden salad$12.00
Chef's tasting plate$43.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Desserts</a><a class="nav-link" href="#spy-1203">Starters</a><a class="nav-link" href="#spy-1204">Specials</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">Desserts</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>House lemonade</span><span class="fw-semibold">$5.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Burrata with tomatoes</span><span class="fw-semibold">$15.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Truffle pasta</span><span class="fw-semibold">$25.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Starters</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>House lemonade</span><span class="fw-semibold">$5.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Wood-fired pizza</span><span class="fw-semibold">$20.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Burrata with tomatoes</span><span class="fw-semibold">$14.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" 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>Burrata with tomatoes</span><span class="fw-semibold">$14.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Garden salad</span><span class="fw-semibold">$12.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.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Cooking classes on Saturday mornings teach you our favourite recipes. Friendly people answer your questions quickly, by phone, chat or email. We have been feeding this neighbourhood for over a decade, and we still love it.

This week

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

Later

Our team has done this many times, so you never have to guess. Children are always welcome, with a menu made just for them. Our sommelier has paired each dish with wines from small family vineyards.

<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">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Cooking classes on Saturday mornings teach you our favourite recipes. Friendly people answer your questions quickly, by phone, chat or email. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Children are always welcome, with a menu made just for them. Our sommelier has paired each dish with wines from small family vineyards.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Every detail is handled by people who care about getting it right. Book a table online in seconds, or call us for groups of eight or more. 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.

Orbit

Bread is baked every morning and pasta is rolled by hand in our kitchen. Every dish is cooked to order, so tell us if you would like anything changed. 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.

Landing

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

<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">Every detail is handled by people who care about getting it right. Book a table online in seconds, or call us for groups of eight or more. 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>
    </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. 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. Thousands of guests already trust us, and we work hard to keep it that way.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">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. Order for pickup or delivery and enjoy the same dishes at home.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 May 16, 2026

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

v3.1 Jul 16, 2026

NewOrder for pickup or delivery and enjoy the same dishes at home.
ImprovedPrivate dining rooms seat up to forty guests for birthdays and business dinners.
FixedChildren are always welcome, with a menu made just for them.

v3.0 Nov 30, 2025

NewOur team has done this many times, so you never have to guess.
ImprovedVegan, vegetarian and gluten-free dishes are marked clearly on every menu.
FixedOur menu changes with the seasons and the best produce from nearby farms.

v2.9 Jun 17, 2026

NewClear prices, honest advice and no surprises along the way.
ImprovedOur sommelier has paired each dish with wines from small family vineyards.
FixedBread is baked every morning and pasta is rolled by hand in our kitchen.

<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">May 16, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Cooking classes on Saturday mornings teach you our favourite recipes.</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>Start in minutes and get help from a real person whenever you need it.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jul 16, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Order for pickup or delivery and enjoy the same dishes at home.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Private dining rooms seat up to forty guests for birthdays and business dinners.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Children are always welcome, with a menu made just for them.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Nov 30, 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>Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our menu changes with the seasons and the best produce from nearby farms.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Jun 17, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clear prices, honest advice and no surprises along the way.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our sommelier has paired each dish with wines from small family vineyards.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Bread is baked every morning and pasta is rolled by hand in our kitchen.</li>
        </ul>
      </div>
    </div>
  </div>
</div>