Scrollspy

Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.

1In a navbar

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

Intro

Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. 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. We keep things simple, so you can focus on what matters to you. Our menu changes with the seasons and the best produce from nearby farms.

Details

Our sommelier has paired each dish with wines from small family vineyards. Children are always welcome, with a menu made just for them. Every dish is cooked to order, so tell us if you would like anything changed. Private dining rooms seat up to forty guests for birthdays and business dinners.

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

Pricing

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

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Zest</a>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
    <li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
  </ul>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1122" class="pb-3">
    <h3 class="h6">Intro</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We keep things simple, so you can focus on what matters to you. Our menu changes with the seasons and the best produce from nearby farms.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Our sommelier has paired each dish with wines from small family vineyards. Children are always welcome, with a menu made just for them. Every dish is cooked to order, so tell us if you would like anything changed. Private dining rooms seat up to forty guests for birthdays and business dinners.</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. Our terrace is open from spring to autumn, with heaters for cooler evenings. Order for pickup or delivery and enjoy the same dishes at home.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">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. 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.</p>
    <p class="small">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. Clear prices, honest advice and no surprises along the way.</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. 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.

Step two

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

Step three

We measure success by how many guests come back and tell their friends. Every dish is cooked to order, so tell us if you would like anything changed. Our terrace is open from spring to autumn, with heaters for cooler evenings. Cooking classes on Saturday mornings teach you our favourite recipes.

Step four

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

<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
  <a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1126" class="pb-3">
    <h3 class="h6">Step one</h3>
    <p class="small">Our menu changes with the seasons and the best produce from nearby farms. We have been feeding this neighbourhood for over a decade, and we still love it. Children are always welcome, with a menu made just for them.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">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. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">We measure success by how many guests come back and tell their friends. Every dish is cooked to order, so tell us if you would like anything changed. Our terrace is open from spring to autumn, with heaters for cooler evenings. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <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. Every detail is handled by people who care about getting it right.</p>
  </div>
</div>

3Vertical pills

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

Wine pairing

Our sommelier has paired each dish with wines from small family vineyards. Private dining rooms seat up to forty guests for birthdays and business dinners. We keep things simple, so you can focus on what matters to you.

Dine-in

Bread is baked every morning and pasta is rolled by hand in our kitchen. Order for pickup or delivery and enjoy the same dishes at home. We listen first, then build a plan around what you actually need. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

Private events

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

Questions

Our menu changes with the seasons and the best produce from nearby farms. We have been feeding this neighbourhood for over a decade, and we still love it. Order for pickup or delivery and enjoy the same dishes at home. 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-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Wine pairing</h3>
        <p class="small">Our sommelier has paired each dish with wines from small family vineyards. Private dining rooms seat up to forty guests for birthdays and business dinners. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Dine-in</h3>
        <p class="small">Bread is baked every morning and pasta is rolled by hand in our kitchen. Order for pickup or delivery and enjoy the same dishes at home. We listen first, then build a plan around what you actually need. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Private events</h3>
        <p class="small">We measure success by how many guests come back and tell their friends. We listen first, then build a plan around what you actually need. 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">Our menu changes with the seasons and the best produce from nearby farms. We have been feeding this neighbourhood for over a decade, and we still love it. Order for pickup or delivery and enjoy the same dishes at home. 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

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

Install

Our team has done this many times, so you never have to guess. Cooking classes on Saturday mornings teach you our favourite recipes. We keep things simple, so you can focus on what matters to you. Our terrace is open from spring to autumn, with heaters for cooler evenings.

Configure

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. Every dish is cooked to order, so tell us if you would like anything changed. Clear prices, honest advice and no surprises along the way.

Usage

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. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Cooking classes on Saturday mornings teach you our favourite recipes.

Examples

Every detail is handled by people who care about getting it right. Children are always welcome, with a menu made just for them. We listen first, then build a plan around what you actually need.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">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. Private dining rooms seat up to forty guests for birthdays and business dinners. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Cooking classes on Saturday mornings teach you our favourite recipes. We keep things simple, so you can focus on what matters to you. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">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. Every dish is cooked to order, so tell us if you would like anything changed. Clear prices, honest advice and no surprises along the way.</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. 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. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Children are always welcome, with a menu made just for them. We listen first, then build a plan around what you actually need.</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

Private dining rooms seat up to forty guests for birthdays and business dinners. We have been feeding this neighbourhood for over a decade, and we still love it. 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.

Midday

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. Clear prices, honest advice and no surprises along the way. Our menu changes with the seasons and the best produce from nearby farms.

Afternoon

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

Evening

Start in minutes and get help from a real person whenever you need it. Order for pickup or delivery and enjoy the same dishes at home. Every dish is cooked to order, so tell us if you would like anything changed. Our sommelier has paired each dish with wines from small family vineyards.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1141" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. We have been feeding this neighbourhood for over a decade, and we still love it. 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.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Our menu changes with the seasons and the best produce from nearby farms.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</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. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Order for pickup or delivery and enjoy the same dishes at home. Every dish is cooked to order, so tell us if you would like anything changed. Our sommelier has paired each dish with wines from small family vineyards.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Book a table online in seconds, or call us for groups of eight or more. Friendly people answer your questions quickly, by phone, chat or email. We have been feeding this neighbourhood for over a decade, and we still love it.

Beta

Thousands of guests already trust us, and we work hard to keep it that way. Children are always welcome, with a menu made just for them. Every detail is handled by people who care about getting it right. Cooking classes on Saturday mornings teach you our favourite recipes.

Gamma

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

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
      <a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">Book a table online in seconds, or call us for groups of eight or more. Friendly people answer your questions quickly, by phone, chat or email. 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">Thousands of guests already trust us, and we work hard to keep it that way. Children are always welcome, with a menu made just for them. Every detail is handled by people who care about getting it right. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</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. We keep things simple, so you can focus on what matters to you.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

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

Features

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

Reviews

Our sommelier has paired each dish with wines from small family vineyards. Order for pickup or delivery and enjoy the same dishes at home. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

FAQ

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

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
  <a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</h3>
    <p class="small">We listen first, then build a plan around what you actually need. We measure success by how many guests come back and tell their friends. 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.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</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. 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.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Our sommelier has paired each dish with wines from small family vineyards. Order for pickup or delivery and enjoy the same dishes at home. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Our team has done this many times, so you never have to guess. 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.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

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

Background

Friendly people answer your questions quickly, by phone, chat or email. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Every detail is handled by people who care about getting it right.

Method

Start in minutes and get help from a real person whenever you need it. We have been feeding this neighbourhood for over a decade, and we still love it. We keep things simple, so you can focus on what matters to you. Book a table online in seconds, or call us for groups of eight or more.

Results

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

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. We measure success by how many guests come back and tell their friends. 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.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. We have been feeding this neighbourhood for over a decade, and we still love it. We keep things simple, so you can focus on what matters to you. Book a table online in seconds, or call us for groups of eight or more.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. 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.</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

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

Set up your profile

We measure success by how many guests come back and tell their friends. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We keep things simple, so you can focus on what matters to you.

Invite the team

Friendly people answer your questions quickly, by phone, chat or email. Private dining rooms seat up to forty guests for birthdays and business dinners. We have been feeding this neighbourhood for over a decade, and we still love it.

Go live

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. Clear prices, honest advice and no surprises along the way. Bread is baked every morning and pasta is rolled by hand in our kitchen.

<div class="row g-3">
  <div class="col-sm-5">
    <div id="spy-nav-1160" class="list-group list-group-numbered">
      <a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
    </div>
  </div>
  <div class="col-sm-7">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">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 sommelier has paired each dish with wines from small family vineyards. Our menu changes with the seasons and the best produce from nearby farms.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">We measure success by how many guests come back and tell their friends. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Private dining rooms seat up to forty guests for birthdays and business dinners. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">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. Clear prices, honest advice and no surprises along the way. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Three pasta shapes to make at home

Order for pickup or delivery and enjoy the same dishes at home. Our terrace is open from spring to autumn, with heaters for cooler evenings. We listen first, then build a plan around what you actually need.

2024

The story of our wood-fired oven

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

2025

A beginner's guide to getting started

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

2026

Our chef's guide to seasonal autumn produce

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

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">Three pasta shapes to make at home</h3>
    <p class="small mb-0">Order for pickup or delivery and enjoy the same dishes at home. Our terrace is open from spring to autumn, with heaters for cooler evenings. We listen first, then build a plan around what you actually need.</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 story of our wood-fired oven</h3>
    <p class="small mb-0">Cooking classes on Saturday mornings teach you our favourite recipes. Our team has done this many times, so you never have to guess. Thousands of guests already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-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">A beginner&#39;s guide to getting started</h3>
    <p class="small mb-0">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. Every detail is handled by people who care about getting it right.</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 chef&#39;s guide to seasonal autumn produce</h3>
    <p class="small mb-0">Children are always welcome, with a menu made just for them. Book a table online in seconds, or call us for groups of eight or more. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Planning the perfect birthday dinner?: Every detail is handled by people who care about getting it right.
Our chocolate tart, step by step?: Our sommelier has paired each dish with wines from small family vineyards.
What is new on our winter menu?: We listen first, then build a plan around what you actually need.

Shipping

Looking back at a busy season?: Start in minutes and get help from a real person whenever you need it.
Five wines to pair with a summer dinner?: Private dining rooms seat up to forty guests for birthdays and business dinners.
Five things we learned this year?: Order for pickup or delivery and enjoy the same dishes at home.

Returns

What our guests asked us most?: Our team has done this many times, so you never have to guess.
Vegan dishes worth crossing town for?: We have been feeding this neighbourhood for over a decade, and we still love it.
How to choose the right dish?: 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-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">Planning the perfect birthday dinner?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">Our chocolate tart, step by step?</dt>
          <dd class="small text-body-secondary">Our sommelier has paired each dish with wines from small family vineyards.</dd>
          <dt class="small">What is new on our winter menu?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">Looking back at a busy season?</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">Five wines to pair with a summer dinner?</dt>
          <dd class="small text-body-secondary">Private dining rooms seat up to forty guests for birthdays and business dinners.</dd>
          <dt class="small">Five things we learned this year?</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-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">Our team has done this many times, so you never have to guess.</dd>
          <dt class="small">Vegan dishes worth crossing town for?</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">How to choose the right dish?</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

Bread is baked every morning and pasta is rolled by hand in our kitchen. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.

Battery

Our menu changes with the seasons and the best produce from nearby farms. Thousands of guests already trust us, and we work hard to keep it that way. Our terrace is open from spring to autumn, with heaters for cooler evenings. We keep things simple, so you can focus on what matters to you.

Connectivity

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

Security

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

<div class="row g-3">
  <div class="col-sm-4">
    <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-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Bread is baked every morning and pasta is rolled by hand in our kitchen. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Thousands of guests already trust us, and we work hard to keep it that way. Our terrace is open from spring to autumn, with heaters for cooler evenings. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">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. Book a table online in seconds, or call us for groups of eight or more.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Our sommelier has paired each dish with wines from small family vineyards. Order for pickup or delivery and enjoy the same dishes at home. Every detail is handled by people who care about getting it right. Thousands of guests already trust us, and we work hard to keep it that way.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$19.27 / mo

Chef's specials
Chef's specials
Local ingredients

Team

$43.25 / mo

Local ingredients
Local ingredients
Kid friendly

Business

$71.71 / mo

Chef's specials
Local ingredients
Kid friendly

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

14Chapter reader

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

Chapter 1: How we make our sourdough every morning

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

We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.

Chapter 2: The small habits that make a big difference

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. 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. Our menu changes with the seasons and the best produce from nearby farms.

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

Chapter 3: Our favourite tips for busy weeks

We measure success by how many guests come back and tell their friends. Cooking classes on Saturday mornings teach you our favourite recipes. 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.

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

Chapter 4: Meet the farmers behind our 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. 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. We keep things simple, so you can focus on what matters to you. Order for pickup or delivery and enjoy the same dishes at home.

<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
  <a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-3">
    <h3 class="h6">Chapter 1: How we make our sourdough every morning</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. Our team has done this many times, so you never have to guess.</p>
    <p class="small">We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you.</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">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. 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. Our menu changes with the seasons and the best produce from nearby farms.</p>
    <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. 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.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Our favourite tips for busy weeks</h3>
    <p class="small">We measure success by how many guests come back and tell their friends. Cooking classes on Saturday mornings teach you our favourite recipes. 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>
    <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. Cooking classes on Saturday mornings teach you our favourite recipes.</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 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. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
    <p class="small">Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. 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

Our terrace is open from spring to autumn, with heaters for cooler evenings. Friendly people answer your questions quickly, by phone, chat or email. Private dining rooms seat up to forty guests for birthdays and business dinners.

Notifications

Product news

Weekly digest

Every detail is handled by people who care about getting it right. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Thousands of guests already trust us, and we work hard to keep it that way.

Privacy

Hide my profile from search

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

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded">
      <a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1189" class="pb-3">
        <h3 class="h6">Profile</h3>
        <div class="mb-2">
          <label for="spy-in-1192" class="form-label small">Display name</label>
          <input class="form-control form-control-sm" id="spy-in-1192" value="Nora Larsen">
        </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="Copenhagen">
        </div>
        <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. Friendly people answer your questions quickly, by phone, chat or email. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
      <div id="spy-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">Every detail is handled by people who care about getting it right. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Thousands of guests already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1191" class="pb-3">
        <h3 class="h6">Privacy</h3>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="spy-sw-1196">
          <label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
        </div>
        <p class="small">Clear prices, honest advice and no surprises along the way. 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.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Design

Jonah Silva
Project Manager
Nadia Fischer
Marketing Lead
Ava Harlow
Product Designer

Human Resources

Jonah Nguyen
Project Manager
Owen Tanaka
Finance Lead
Maya Whitaker
Marketing Lead

Sales

Isla Ashford
Sales Executive
Nora Hughes
Marketing Lead
Elena Rossi
Frontend Engineer

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Design</a><a class="nav-link" href="#spy-1199">Human Resources</a><a class="nav-link" href="#spy-1200">Sales</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Design</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Jonah Silva"><div><div class="small fw-semibold">Jonah Silva</div><div class="small text-body-secondary">Project Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Nadia Fischer"><div><div class="small fw-semibold">Nadia Fischer</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Ava Harlow"><div><div class="small fw-semibold">Ava Harlow</div><div class="small text-body-secondary">Product Designer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Human Resources</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Jonah Nguyen"><div><div class="small fw-semibold">Jonah Nguyen</div><div class="small text-body-secondary">Project Manager</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="Owen Tanaka"><div><div class="small fw-semibold">Owen Tanaka</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-12.svg" class="rounded-circle" width="36" height="36" alt="Maya Whitaker"><div><div class="small fw-semibold">Maya Whitaker</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-7.svg" class="rounded-circle" width="36" height="36" alt="Isla Ashford"><div><div class="small fw-semibold">Isla Ashford</div><div class="small text-body-secondary">Sales Executive</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Nora Hughes"><div><div class="small fw-semibold">Nora Hughes</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Elena Rossi"><div><div class="small fw-semibold">Elena Rossi</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Drinks

Slow-cooked lamb$32.00
Chocolate tart$9.00
Seasonal soup$9.00

Starters

Lemon tiramisu$10.00
Espresso martini$12.00
Burrata with tomatoes$13.00

Desserts

Slow-cooked lamb$32.00
Espresso martini$12.00
Wood-fired pizza$19.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Drinks</a><a class="nav-link" href="#spy-1203">Starters</a><a class="nav-link" href="#spy-1204">Desserts</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-3">
    <h3 class="h6">Drinks</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Slow-cooked lamb</span><span class="fw-semibold">$32.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Chocolate tart</span><span class="fw-semibold">$9.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Seasonal soup</span><span class="fw-semibold">$9.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Starters</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Lemon tiramisu</span><span class="fw-semibold">$10.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Espresso martini</span><span class="fw-semibold">$12.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Burrata with tomatoes</span><span class="fw-semibold">$13.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Desserts</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Slow-cooked lamb</span><span class="fw-semibold">$32.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>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Wood-fired pizza</span><span class="fw-semibold">$19.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

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

This week

Our sommelier has paired each dish with wines from small family vineyards. We have been feeding this neighbourhood for over a decade, and we still love it. We measure success by how many guests come back and tell their friends.

Later

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

<div class="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Children are always welcome, with a menu made just for them. Clear prices, honest advice and no surprises along the way. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Our sommelier has paired each dish with wines from small family vineyards. We have been feeding this neighbourhood for over a decade, and we still love it. 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">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. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Bread is baked every morning and pasta is rolled by hand in our kitchen. Friendly people answer your questions quickly, by phone, chat or email. Children are always welcome, with a menu made just for them.

Orbit

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

Landing

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

<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
  <nav id="spy-nav-1209" class="nav nav-pills mb-2">
    <a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
  </nav>
  <div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">Bread is baked every morning and pasta is rolled by hand in our kitchen. Friendly people answer your questions quickly, by phone, chat or email. Children are always welcome, with a menu made just for them.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">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. Order for pickup or delivery and enjoy the same dishes at home. Book a table online in seconds, or call us for groups of eight or more.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. Thousands of guests already trust us, and we work hard to keep it that way. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Jun 10, 2026

NewCooking classes on Saturday mornings teach you our favourite recipes.
ImprovedWe keep things simple, so you can focus on what matters to you.
FixedOur team has done this many times, so you never have to guess.

v3.1 Nov 4, 2025

NewOur sommelier has paired each dish with wines from small family vineyards.
ImprovedOur terrace is open from spring to autumn, with heaters for cooler evenings.
FixedEvery detail is handled by people who care about getting it right.

v3.0 Sep 3, 2026

NewClear prices, honest advice and no surprises along the way.
ImprovedCooking classes on Saturday mornings teach you our favourite recipes.
FixedWe listen first, then build a plan around what you actually need.

v2.9 Aug 20, 2026

NewFriendly people answer your questions quickly, by phone, chat or email.
ImprovedVegan, vegetarian and gluten-free dishes are marked clearly on every menu.
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-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-3">
        <h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Jun 10, 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 keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our team has done this many times, so you never have to guess.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Nov 4, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our sommelier has paired each dish with wines from small family vineyards.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Our terrace is open from spring to autumn, with heaters for cooler evenings.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every detail is handled by people who care about getting it right.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Sep 3, 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>Cooking classes on Saturday mornings teach you our favourite recipes.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We listen first, then build a plan around what you actually need.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Aug 20, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Friendly people answer your questions quickly, by phone, chat or email.</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>Bread is baked every morning and pasta is rolled by hand in our kitchen.</li>
        </ul>
      </div>
    </div>
  </div>
</div>