diff --git a/R/build-home-index.R b/R/build-home-index.R
index 84b87df31..901dec3f2 100644
--- a/R/build-home-index.R
+++ b/R/build-home-index.R
@@ -157,7 +157,7 @@ data_home_sidebar_links <- function(pkg = ".") {
 data_home_toc <- function(pkg) {
   sidebar_section(
     "Table of contents",
-    '<nav id="toc" data-toggle="toc" class="sticky-top"></nav>'
+    '<nav id="toc" class="sticky-top"></nav>'
   )
 }
 
diff --git a/inst/assets/BS4/pkgdown.js b/inst/assets/BS4/pkgdown.js
index 59bbab2ca..bf2d74c72 100644
--- a/inst/assets/BS4/pkgdown.js
+++ b/inst/assets/BS4/pkgdown.js
@@ -9,6 +9,11 @@
       offset: 60
     });
 
+    Toc.init({
+      $nav: $("#toc"),
+      $scope: $("h2, h3, h4, h5, h6")
+    });
+
     // Activate popovers
     $('[data-toggle="popover"]').popover({
       container: 'body',
diff --git a/inst/templates/BS4/content-article.html b/inst/templates/BS4/content-article.html
index b9eca6a52..8f3c57a33 100644
--- a/inst/templates/BS4/content-article.html
+++ b/inst/templates/BS4/content-article.html
@@ -50,7 +50,7 @@ <h4 data-toc-skip class="date">$date$</h4>
  <div class="col-md-3 d-none d-md-block" id="sidebar">
     $if(toc)$
     <div class="sticky-top">
-    <nav id="toc" data-toggle="toc" >
+    <nav id="toc">
 
       <h2 data-toc-skip>Contents</h2>
 
diff --git a/inst/templates/BS4/content-news.html b/inst/templates/BS4/content-news.html
index 2bb90640a..10e725668 100644
--- a/inst/templates/BS4/content-news.html
+++ b/inst/templates/BS4/content-news.html
@@ -13,7 +13,7 @@ <h1 class="display-4" data-toc-skip>Changelog <small>{{version}}</small></h1>
 
   <div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
     <div class="sticky-top">
-    <nav id="toc" data-toggle="toc" >
+    <nav id="toc">
 
       <h2 data-toc-skip>Contents</h2>
 
diff --git a/inst/templates/BS4/content-reference-index.html b/inst/templates/BS4/content-reference-index.html
index 5d85ffe40..65727960b 100644
--- a/inst/templates/BS4/content-reference-index.html
+++ b/inst/templates/BS4/content-reference-index.html
@@ -39,7 +39,7 @@ <h3 id="{{slug}}" class="hasAnchor"><a href="#{{slug}}" class="anchor"></a>{{sub
 
   <div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">
     <div class="sticky-top">
-    <nav id="toc" data-toggle="toc" >
+    <nav id="toc">
 
       <h2 data-toc-skip>Contents</h2>
 
diff --git a/inst/templates/BS4/content-reference-topic.html b/inst/templates/BS4/content-reference-topic.html
index e0b593057..39009a970 100644
--- a/inst/templates/BS4/content-reference-topic.html
+++ b/inst/templates/BS4/content-reference-topic.html
@@ -44,7 +44,7 @@ <h2 class="hasAnchor" id="examples"><a class="anchor" href="#examples"></a>Examp
   </div>
   <div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">
     <div class="sticky-top">
-    <nav id="toc" data-toggle="toc" >
+    <nav id="toc">
 
       <h2 data-toc-skip>Contents</h2>
 
diff --git a/inst/templates/BS4/content-title-body.html b/inst/templates/BS4/content-title-body.html
index 97abb118a..47866385f 100644
--- a/inst/templates/BS4/content-title-body.html
+++ b/inst/templates/BS4/content-title-body.html
@@ -12,7 +12,7 @@ <h1 class="display-4">{{pagetitle}}</h1>
 
   <div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">
    <div class="sticky-top">
-    <nav id="toc" data-toggle="toc" >
+    <nav id="toc">
 
       <h2 data-toc-skip>Contents</h2>
 
diff --git a/tests/testthat/_snaps/data_home_sidebar.md b/tests/testthat/_snaps/data_home_sidebar.md
index 8544c7488..ff6939848 100644
--- a/tests/testthat/_snaps/data_home_sidebar.md
+++ b/tests/testthat/_snaps/data_home_sidebar.md
@@ -67,7 +67,7 @@
       {html_node}
       <div class="table-of-contents">
       [1] <h2 data-toc-skip>Table of contents</h2>
-      [2] <ul class="list-unstyled">\n<li><nav id="toc" data-toggle="toc" class="st ...
+      [2] <ul class="list-unstyled">\n<li><nav id="toc" class="sticky-top"></nav></ ...
 
 # data_home_sidebar() outputs informative error messages