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

Children are always welcome, with a menu made just for them. Private dining rooms seat up to forty guests for birthdays and business dinners. Thousands of guests already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess.

We measure success by how many guests come back and tell their friends. Start in minutes and get help from a real person whenever you need it. Bread is baked every morning and pasta is rolled by hand in our kitchen.

Details

Order for pickup or delivery and enjoy the same dishes at home. Our sommelier has paired each dish with wines from small family vineyards. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Book a table online in seconds, or call us for groups of eight or more.

We listen first, then build a plan around what you actually need. Our menu changes with the seasons and the best produce from nearby farms. Every dish is cooked to order, so tell us if you would like anything changed. Every detail is handled by people who care about getting it right.

Pricing

Friendly people answer your questions quickly, by phone, chat or email. Cooking classes on Saturday mornings teach you our favourite recipes. Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it.

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our menu changes with the seasons and the best produce from nearby farms. Order for pickup or delivery and enjoy the same dishes at home. Book a table online in seconds, or call us for groups of eight or more.

<nav id="spy-nav-1121" class="navbar bg-surface-3 px-4 mb-4 rounded-md">
  <a class="navbar-brand" href="#">Yaraly Labs</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="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Intro</h3>
    <p class="small">Children are always welcome, with a menu made just for them. Private dining rooms seat up to forty guests for birthdays and business dinners. Thousands of guests already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess.</p>
    <p class="small">We measure success by how many guests come back and tell their friends. Start in minutes and get help from a real person whenever you need it. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
  </div>
  <div id="spy-1123" class="pb-4">
    <h3 class="h6">Details</h3>
    <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Our sommelier has paired each dish with wines from small family vineyards. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Book a table online in seconds, or call us for groups of eight or more.</p>
    <p class="small">We listen first, then build a plan around what you actually need. Our menu changes with the seasons and the best produce from nearby farms. Every dish is cooked to order, so tell us if you would like anything changed. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1124" class="pb-4">
    <h3 class="h6">Pricing</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Cooking classes on Saturday mornings teach you our favourite recipes. Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Our menu changes with the seasons and the best produce from nearby farms. 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>

2Horizontal pills

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

Step one

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

Step two

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

Step three

We have been feeding this neighbourhood for over a decade, and we still love it. Our team has done this many times, so you never have to guess. Bread is baked every morning and pasta is rolled by hand in our kitchen.

Step four

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

<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="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Step one</h3>
    <p class="small">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. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1127" class="pb-4">
    <h3 class="h6">Step two</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. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
  </div>
  <div id="spy-1128" class="pb-4">
    <h3 class="h6">Step three</h3>
    <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. Our team has done this many times, so you never have to guess. Bread is baked every morning and pasta is rolled by hand in our kitchen.</p>
  </div>
  <div id="spy-1129" class="pb-4">
    <h3 class="h6">Step four</h3>
    <p class="small">Our sommelier has paired each dish with wines from small family vineyards. Clear prices, honest advice and no surprises along the way. Private dining rooms seat up to forty guests for birthdays and business dinners. We measure success by how many guests come back and tell their friends.</p>
  </div>
</div>

3Vertical pills

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

Wine pairing

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

Dine-in

Private events

Our sommelier has paired each dish with wines from small family vineyards. Cooking classes on Saturday mornings teach you our favourite recipes. We listen first, then build a plan around what you actually need. Our terrace is open from spring to autumn, with heaters for cooler evenings.

Questions

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.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-col">
      <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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Wine pairing</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. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
      <div id="spy-1132" class="pb-4">
        <h3 class="h6">Dine-in</h3>
        <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. Our team has done this many times, so you never have to guess. Bread is baked every morning and pasta is rolled by hand in our kitchen. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1133" class="pb-4">
        <h3 class="h6">Private events</h3>
        <p class="small">Our sommelier has paired each dish with wines from small family vineyards. Cooking classes on Saturday mornings teach you our favourite recipes. We listen first, then build a plan around what you actually need. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
      </div>
      <div id="spy-1134" class="pb-4">
        <h3 class="h6">Questions</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.</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. Our menu changes with the seasons and the best produce from nearby farms. Book a table online in seconds, or call us for groups of eight or more.

Install

Friendly people answer your questions quickly, by phone, chat or email. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We measure success by how many guests come back and tell their friends. Clear prices, honest advice and no surprises along the way.

Configure

We keep things simple, so you can focus on what matters to you. Thousands of guests already trust us, and we work hard to keep it that way. Our sommelier has paired each dish with wines from small family vineyards.

Usage

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

Examples

Our terrace is open from spring to autumn, with heaters for cooler evenings. Children are always welcome, with a menu made just for them. Thousands of guests already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-full flex-col items-stretch">
      <nav class="nav nav-pills flex-col">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-col">
          <a class="nav-link ms-4 my-1" href="#spy-1137">Install</a><a class="nav-link ms-4 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-col">
          <a class="nav-link ms-4 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Getting started</h3>
        <p class="small">Children are always welcome, with a menu made just for them. Our menu changes with the seasons and the best produce from nearby farms. Book a table online in seconds, or call us for groups of eight or more.</p>
      </div>
      <div id="spy-1137" class="pb-4">
        <h3 class="h6">Install</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We measure success by how many guests come back and tell their friends. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1138" class="pb-4">
        <h3 class="h6">Configure</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Thousands of guests already trust us, and we work hard to keep it that way. Our sommelier has paired each dish with wines from small family vineyards.</p>
      </div>
      <div id="spy-1139" class="pb-4">
        <h3 class="h6">Usage</h3>
        <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it. Our menu changes with the seasons and the best produce from nearby farms.</p>
      </div>
      <div id="spy-1140" class="pb-4">
        <h3 class="h6">Examples</h3>
        <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. Children are always welcome, with a menu made just for them. Thousands of guests already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you.</p>
      </div>
    </div>
  </div>
</div>

5List group

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

Morning Midday Afternoon Evening

Morning

Bread is baked every morning and pasta is rolled by hand in our kitchen. Private dining rooms seat up to forty guests for birthdays and business dinners. Clear prices, honest advice and no surprises along the way.

Midday

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. 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 team has done this many times, so you never have to guess.

Afternoon

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

Evening

Every dish is cooked to order, so tell us if you would like anything changed. Cooking classes on Saturday mornings teach you our favourite recipes. Our menu changes with the seasons and the best produce from nearby farms. Cooking classes on Saturday mornings teach you our favourite recipes.

<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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Morning</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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1143" class="pb-4">
        <h3 class="h6">Midday</h3>
        <p class="small">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. 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 team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1144" class="pb-4">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1145" class="pb-4">
        <h3 class="h6">Evening</h3>
        <p class="small">Every dish is cooked to order, so tell us if you would like anything changed. Cooking classes on Saturday mornings teach you our favourite recipes. 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>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Thousands of guests already trust us, and we work hard to keep it that way. We have been feeding this neighbourhood for over a decade, and we still love it. Clear prices, honest advice and no surprises along the way.

Beta

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

Gamma

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

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="flex flex-col gap-2 small">
      <a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1147">Alpha</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1148">Beta</a><a class="p-1 rounded-md link-body-emphasis no-underline" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Alpha</h3>
        <p class="small">Thousands of guests already trust us, and we work hard to keep it that way. We have been feeding this neighbourhood for over a decade, and we still love it. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1148" class="pb-4">
        <h3 class="h6">Beta</h3>
        <p class="small">Children are always welcome, with a menu made just for them. 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.</p>
      </div>
      <div id="spy-1149" class="pb-4">
        <h3 class="h6">Gamma</h3>
        <p class="small">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. Order for pickup or delivery and enjoy the same dishes at home.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Our terrace is open from spring to autumn, with heaters for cooler evenings. Every dish is cooked to order, so tell us if you would like anything changed. Our sommelier has paired each dish with wines from small family vineyards. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

Features

We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it.

Reviews

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

FAQ

We keep things simple, so you can focus on what matters to you. Book a table online in seconds, or call us for groups of eight or more. Every 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-1150" class="nav nav-underline mb-2 border-b">
  <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="relative border rounded-md p-4 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-4">
    <h3 class="h6">Overview</h3>
    <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. Every dish is cooked to order, so tell us if you would like anything changed. Our sommelier has paired each dish with wines from small family vineyards. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
  </div>
  <div id="spy-1152" class="pb-4">
    <h3 class="h6">Features</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1153" class="pb-4">
    <h3 class="h6">Reviews</h3>
    <p class="small">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. Friendly people answer your questions quickly, by phone, chat or email. Cooking classes on Saturday mornings teach you our favourite recipes.</p>
  </div>
  <div id="spy-1154" class="pb-4">
    <h3 class="h6">FAQ</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Book a table online in seconds, or call us for groups of eight or more. Every 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>

8Table of contents on the right

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

Summary

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

Background

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. Clear prices, honest advice and no surprises along the way. We measure success by how many guests come back and tell their friends.

Method

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

Results

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

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Summary</h3>
        <p class="small">Our menu changes with the seasons and the best produce from nearby farms. 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. Our sommelier has paired each dish with wines from small family vineyards.</p>
      </div>
      <div id="spy-1157" class="pb-4">
        <h3 class="h6">Background</h3>
        <p class="small">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. Clear prices, honest advice and no surprises along the way. We measure success by how many guests come back and tell their friends.</p>
      </div>
      <div id="spy-1158" class="pb-4">
        <h3 class="h6">Method</h3>
        <p class="small">Bread is baked every morning and pasta is rolled by hand in our kitchen. Children are always welcome, with a menu made just for them. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
      <div id="spy-1159" class="pb-4">
        <h3 class="h6">Results</h3>
        <p class="small">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. We have been feeding this neighbourhood for over a decade, and we still love it.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first md:order-last">
    <p class="small font-semibold uppercase text-muted mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-col 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

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

Set up your profile

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

Invite the team

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

Go live

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

<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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Create an account</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. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1162" class="pb-4">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">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. Clear prices, honest advice and no surprises along the way. Thousands of guests already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1163" class="pb-4">
        <h3 class="h6">Invite the team</h3>
        <p class="small">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. Our sommelier has paired each dish with wines from small family vineyards.</p>
      </div>
      <div id="spy-1164" class="pb-4">
        <h3 class="h6">Go live</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Order for pickup or delivery and enjoy the same dishes at home. 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.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Our chef's guide to seasonal autumn produce

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.

2024

Our favourite tips for busy weeks

We measure success by how many guests come back and tell their friends. Our menu changes with the seasons and the best produce from nearby farms. Every dish is cooked to order, so tell us if you would like anything changed.

2025

Three pasta shapes to make at home

Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. 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.

2026

Meet the farmers behind our menu

Children are always welcome, with a menu made just for them. Bread is baked every morning and pasta is rolled by hand in our kitchen. Order for pickup or delivery and enjoy the same dishes at home. We measure success by how many guests come back and tell their friends.

<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="relative border rounded-md p-4" 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-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">Our chef&#39;s guide to seasonal autumn produce</h3>
    <p class="small mb-0">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-1167" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">Our favourite tips for busy weeks</h3>
    <p class="small mb-0">We measure success by how many guests come back and tell their friends. Our menu changes with the seasons and the best produce from nearby farms. Every dish is cooked to order, so tell us if you would like anything changed.</p>
  </div>
  <div id="spy-1168" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">Three pasta shapes to make at home</h3>
    <p class="small mb-0">Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. Every dish is cooked to order, so tell us if you would like anything changed. Our sommelier has paired each dish with wines from small family vineyards.</p>
  </div>
  <div id="spy-1169" class="ps-4 pb-6 border-s border-2 border-primary/30">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">Meet the farmers behind our menu</h3>
    <p class="small mb-0">Children are always welcome, with a menu made just for them. Bread is baked every morning and pasta is rolled by hand in our kitchen. Order for pickup or delivery and enjoy the same dishes at home. We measure success by how many guests come back and tell their friends.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Our chocolate tart, step by step?: We listen first, then build a plan around what you actually need.
What our guests asked us most?: Every detail is handled by people who care about getting it right.
A beginner's guide to getting started?: Book a table online in seconds, or call us for groups of eight or more.

Shipping

How to choose the right dish?: Friendly people answer your questions quickly, by phone, chat or email.
Five wines to pair with a summer dinner?: Our terrace is open from spring to autumn, with heaters for cooler evenings.
Planning the perfect birthday dinner?: Our menu changes with the seasons and the best produce from nearby farms.

Returns

Looking back at a busy season?: Cooking classes on Saturday mornings teach you our favourite recipes.
How we make our sourdough every morning?: Start in minutes and get help from a real person whenever you need it.
The story of our wood-fired oven?: We have been feeding this neighbourhood for over a decade, and we still love it.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills sm:flex-col">
      <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="relative border rounded-md p-4" 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-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">Our chocolate tart, step by step?</dt>
          <dd class="small text-muted">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">What our guests asked us most?</dt>
          <dd class="small text-muted">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-muted">Book a table online in seconds, or call us for groups of eight or more.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">How to choose the right dish?</dt>
          <dd class="small text-muted">Friendly people answer your questions quickly, by phone, chat or email.</dd>
          <dt class="small">Five wines to pair with a summer dinner?</dt>
          <dd class="small text-muted">Our terrace is open from spring to autumn, with heaters for cooler evenings.</dd>
          <dt class="small">Planning the perfect birthday dinner?</dt>
          <dd class="small text-muted">Our menu changes with the seasons and the best produce from nearby farms.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-4">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Looking back at a busy season?</dt>
          <dd class="small text-muted">Cooking classes on Saturday mornings teach you our favourite recipes.</dd>
          <dt class="small">How we make our sourdough every morning?</dt>
          <dd class="small text-muted">Start in minutes and get help from a real person whenever you need it.</dd>
          <dt class="small">The story of our wood-fired oven?</dt>
          <dd class="small text-muted">We have been feeding this neighbourhood for over a decade, and we still love it.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

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. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.

Battery

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

Connectivity

Every detail is handled by people who care about getting it right. Our terrace is open from spring to autumn, with heaters for cooler evenings. We measure success by how many guests come back and tell their friends.

Security

We have been feeding this neighbourhood for over a decade, and we still love it. Our menu changes with the seasons and the best produce from nearby farms. 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.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-col">
      <a class="nav-link flex items-center gap-2" href="#spy-1175"><i class="bi bi-cpu-fill" aria-hidden="true"></i>Performance</a><a class="nav-link flex items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link flex items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link flex 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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">Performance</h3>
        <p class="small">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1176" class="pb-4">
        <h3 class="h6">Battery</h3>
        <p class="small">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. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1177" class="pb-4">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Our terrace is open from spring to autumn, with heaters for cooler evenings. We measure success by how many guests come back and tell their friends.</p>
      </div>
      <div id="spy-1178" class="pb-4">
        <h3 class="h6">Security</h3>
        <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. Our menu changes with the seasons and the best produce from nearby farms. 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>
  </div>
</div>

13Pricing plans

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

Starter

$19.15 / mo

Online reservations
Kid friendly
Local ingredients

Team

$39.11 / mo

Local ingredients
Online reservations
Online reservations

Business

$69.13 / mo

Chef's specials
Vegan options
Online reservations

<nav id="spy-nav-1179" class="nav nav-pills justify-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="relative border rounded-md p-4 bg-surface-3" 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-4">
    <div class="card-body">
      <h3 class="h6 card-title">Starter</h3>
      <p class="text-xl font-bold mb-1">$19.15<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Online reservations</li>
        <li>Kid friendly</li>
        <li>Local ingredients</li>
      </ul>
    </div>
  </div>
  <div id="spy-1181" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Team</h3>
      <p class="text-xl font-bold mb-1">$39.11<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Local ingredients</li>
        <li>Online reservations</li>
        <li>Online reservations</li>
      </ul>
    </div>
  </div>
  <div id="spy-1182" class="card mb-4">
    <div class="card-body">
      <h3 class="h6 card-title">Business</h3>
      <p class="text-xl font-bold mb-1">$69.13<small class="text-base text-muted"> / mo</small></p>
      <ul class="small mb-0">
        <li>Chef&#39;s specials</li>
        <li>Vegan options</li>
        <li>Online reservations</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: Five things we learned this year

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

Cooking classes on Saturday mornings teach you our favourite recipes. Our sommelier has paired each dish with wines from small family vineyards. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess.

Chapter 2: Vegan dishes worth crossing town for

We keep things simple, so you can focus on what matters to you. Private dining rooms seat up to forty guests for birthdays and business dinners. We listen first, then build a plan around what you actually need. Thousands of guests already trust us, and we work hard to keep it that way.

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. Our team has done this many times, so you never have to guess. Book a table online in seconds, or call us for groups of eight or more.

Chapter 3: What is new on our winter menu

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

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

Chapter 4: The small habits that make a big difference

Children are always welcome, with a menu made just for them. We listen first, then build a plan around what you actually need. Thousands of guests already trust us, and we work hard to keep it that way. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.

Our menu changes with the seasons and the best produce from nearby farms. Cooking classes on Saturday mornings teach you our favourite recipes. Clear prices, honest advice and no surprises along the way.

<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="relative border rounded-md p-4 border-t-0 rounded-t-none leading-loose" 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-4">
    <h3 class="h6">Chapter 1: Five things we learned this year</h3>
    <p class="small">Children are always welcome, with a menu made just for them. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Every dish is cooked to order, so tell us if you would like anything changed.</p>
    <p class="small">Cooking classes on Saturday mornings teach you our favourite recipes. Our sommelier has paired each dish with wines from small family vineyards. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1185" class="pb-4">
    <h3 class="h6">Chapter 2: Vegan dishes worth crossing town for</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Private dining rooms seat up to forty guests for birthdays and business dinners. We listen first, then build a plan around what you actually need. Thousands of guests already trust us, and we work hard to keep it that way.</p>
    <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. Our team has done this many times, so you never have to guess. Book a table online in seconds, or call us for groups of eight or more.</p>
  </div>
  <div id="spy-1186" class="pb-4">
    <h3 class="h6">Chapter 3: What is new on our winter menu</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. We measure success by how many guests come back and tell their friends.</p>
    <p class="small">Private dining rooms seat up to forty guests for birthdays and business dinners. We keep things simple, so you can focus on what matters to you. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
  </div>
  <div id="spy-1187" class="pb-4">
    <h3 class="h6">Chapter 4: The small habits that make a big difference</h3>
    <p class="small">Children are always welcome, with a menu made just for them. We listen first, then build a plan around what you actually need. Thousands of guests already trust us, and we work hard to keep it that way. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p>
    <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Cooking classes on Saturday mornings teach you our favourite recipes. Clear prices, honest advice and no surprises along the way.</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

We have been feeding this neighbourhood for over a decade, and we still love it. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.

Notifications

Product news

Weekly digest

Order for pickup or delivery and enjoy the same dishes at home. Our sommelier has paired each dish with wines from small family vineyards. Every detail is handled by people who care about getting it right.

Privacy

Hide my profile from search

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

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded-md">
      <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="relative border rounded-md p-4" 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-4">
        <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="Mia 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="Cape Town">
        </div>
        <p class="small">We have been feeding this neighbourhood for over a decade, and we still love it. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1190" class="pb-4">
        <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">Order for pickup or delivery and enjoy the same dishes at home. 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-1191" class="pb-4">
        <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">Friendly people answer your questions quickly, by phone, chat or email. 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>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Legal

Freya Harlow
Project Manager
Liam Haddad
Operations Manager
Lea Quinn
Frontend Engineer

Human Resources

Nadia Delgado
Operations Manager
Mateo Rossi
Project Manager
Tariq Lindqvist
Operations Manager

Marketing

Ruby Moreau
Project Manager
Theo Patel
Project Manager
Lucas Larsen
Backend Engineer

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Legal</a><a class="nav-link" href="#spy-1199">Human Resources</a><a class="nav-link" href="#spy-1200">Marketing</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Legal</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-full" width="36" height="36" alt="Freya Harlow"><div><div class="small font-semibold">Freya Harlow</div><div class="small text-muted">Project Manager</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-full" width="36" height="36" alt="Liam Haddad"><div><div class="small font-semibold">Liam Haddad</div><div class="small text-muted">Operations Manager</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-full" width="36" height="36" alt="Lea Quinn"><div><div class="small font-semibold">Lea Quinn</div><div class="small text-muted">Frontend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-4">
    <h3 class="h6">Human Resources</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-full" width="36" height="36" alt="Nadia Delgado"><div><div class="small font-semibold">Nadia Delgado</div><div class="small text-muted">Operations Manager</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-full" width="36" height="36" alt="Mateo Rossi"><div><div class="small font-semibold">Mateo Rossi</div><div class="small text-muted">Project Manager</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-full" width="36" height="36" alt="Tariq Lindqvist"><div><div class="small font-semibold">Tariq Lindqvist</div><div class="small text-muted">Operations Manager</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-4">
    <h3 class="h6">Marketing</h3>
    <ul class="list-unstyled">
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-full" width="36" height="36" alt="Ruby Moreau"><div><div class="small font-semibold">Ruby Moreau</div><div class="small text-muted">Project Manager</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-full" width="36" height="36" alt="Theo Patel"><div><div class="small font-semibold">Theo Patel</div><div class="small text-muted">Project Manager</div></div></li>
      <li class="flex items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-full" width="36" height="36" alt="Lucas Larsen"><div><div class="small font-semibold">Lucas Larsen</div><div class="small text-muted">Backend Engineer</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Drinks

Lemon tiramisu$11.00
Wood-fired pizza$17.00
Truffle pasta$26.00

Desserts

Garden salad$13.00
Grilled salmon$28.99
Lemon tiramisu$9.00

Starters

Seasonal soup$9.00
Grilled salmon$26.00
Lemon tiramisu$11.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">Desserts</a><a class="nav-link" href="#spy-1204">Starters</a>
</nav>
<div class="relative border rounded-md p-4" 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-4">
    <h3 class="h6">Drinks</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Lemon tiramisu</span><span class="font-semibold">$11.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Wood-fired pizza</span><span class="font-semibold">$17.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Truffle pasta</span><span class="font-semibold">$26.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-4">
    <h3 class="h6">Desserts</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Garden salad</span><span class="font-semibold">$13.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Grilled salmon</span><span class="font-semibold">$28.99</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Lemon tiramisu</span><span class="font-semibold">$9.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-4">
    <h3 class="h6">Starters</h3>
    <ul class="list-unstyled">
      <li class="flex justify-between border-b py-2 small"><span>Seasonal soup</span><span class="font-semibold">$9.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Grilled salmon</span><span class="font-semibold">$26.00</span></li>
      <li class="flex justify-between border-b py-2 small"><span>Lemon tiramisu</span><span class="font-semibold">$11.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Our sommelier has paired each dish with wines from small family vineyards. Children are always welcome, with a menu made just for them. Clear prices, honest advice and no surprises along the way.

This week

Our terrace is open from spring to autumn, with heaters for cooler evenings. Cooking classes on Saturday mornings teach you our favourite recipes. We keep things simple, so you can focus on what matters to you.

Later

Order for pickup or delivery and enjoy the same dishes at home. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Start in minutes and get help from a real person whenever you need it. Private dining rooms seat up to forty guests for birthdays and business dinners.

<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="relative border rounded-md p-4 border-0 rounded-none" 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-4">
        <h3 class="h6">Today</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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1207" class="pb-4">
        <h3 class="h6">This week</h3>
        <p class="small">Our terrace is open from spring to autumn, with heaters for cooler evenings. Cooking classes on Saturday mornings teach you our favourite recipes. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1208" class="pb-4">
        <h3 class="h6">Later</h3>
        <p class="small">Order for pickup or delivery and enjoy the same dishes at home. Vegan, vegetarian and gluten-free dishes are marked clearly on every menu. Start in minutes and get help from a real person whenever you need it. Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Every dish is cooked to order, so tell us if you would like anything changed. We have been feeding this neighbourhood for over a decade, and we still love it. Our team has done this many times, so you never have to guess. Our menu changes with the seasons and the best produce from nearby farms.

Orbit

Bread is baked every morning and pasta is rolled by hand in our kitchen. Thousands of guests already trust us, and we work hard to keep it that way. Our sommelier has paired each dish with wines from small family vineyards.

Landing

Our menu changes with the seasons and the best produce from nearby farms. Friendly people answer your questions quickly, by phone, chat or email. Our terrace is open from spring to autumn, with heaters for cooler evenings.

<div data-ui-theme="dark" class="bg-dark text-body rounded-md p-4">
  <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="relative border rounded-md p-4 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-4">
      <h3 class="h6">Launch</h3>
      <p class="small">Every dish is cooked to order, so tell us if you would like anything changed. We have been feeding this neighbourhood for over a decade, and we still love it. Our team has done this many times, so you never have to guess. Our menu changes with the seasons and the best produce from nearby farms.</p>
    </div>
    <div id="spy-1211" class="pb-4">
      <h3 class="h6">Orbit</h3>
      <p class="small">Bread is baked every morning and pasta is rolled by hand in our kitchen. Thousands of guests already trust us, and we work hard to keep it that way. Our sommelier has paired each dish with wines from small family vineyards.</p>
    </div>
    <div id="spy-1212" class="pb-4">
      <h3 class="h6">Landing</h3>
      <p class="small">Our menu changes with the seasons and the best produce from nearby farms. Friendly people answer your questions quickly, by phone, chat or email. Our terrace is open from spring to autumn, with heaters for cooler evenings.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Mar 23, 2026

NewClear prices, honest advice and no surprises along the way.
ImprovedBread is baked every morning and pasta is rolled by hand in our kitchen.
FixedBook a table online in seconds, or call us for groups of eight or more.

v3.1 Dec 13, 2025

NewWe keep things simple, so you can focus on what matters to you.
ImprovedEvery dish is cooked to order, so tell us if you would like anything changed.
FixedVegan, vegetarian and gluten-free dishes are marked clearly on every menu.

v3.0 Oct 31, 2025

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

v2.9 Sep 27, 2025

NewWe measure success by how many guests come back and tell their friends.
ImprovedEvery detail is handled by people who care about getting it right.
FixedWe have been feeding this neighbourhood for over a decade, and we still love it.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-col 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="relative border rounded-md p-4" 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-4">
        <h3 class="h6">v3.2 <small class="text-muted font-normal">Mar 23, 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>Bread is baked every morning and pasta is rolled by hand in our kitchen.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Book a table online in seconds, or call us for groups of eight or more.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-4">
        <h3 class="h6">v3.1 <small class="text-muted font-normal">Dec 13, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every dish is cooked to order, so tell us if you would like anything changed.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-4">
        <h3 class="h6">v3.0 <small class="text-muted font-normal">Oct 31, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Private dining rooms seat up to forty guests for birthdays and business dinners.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Order for pickup or delivery and enjoy the same dishes at home.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Children are always welcome, with a menu made just for them.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-4">
        <h3 class="h6">v2.9 <small class="text-muted font-normal">Sep 27, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We measure success by how many guests come back and tell their friends.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every detail is handled by people who care about getting it right.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We have been feeding this neighbourhood for over a decade, and we still love it.</li>
        </ul>
      </div>
    </div>
  </div>
</div>