diff --git a/content/static/css/sidenav.css b/content/static/css/sidenav.css
index cda0b07..76acf90 100644
--- a/content/static/css/sidenav.css
+++ b/content/static/css/sidenav.css
@@ -18,19 +18,13 @@
   overflow-x: hidden;
   overflow-y: scroll;
   padding-top: 1rem;
-  padding-left: 1.75rem;
+  padding-left: 0.25rem;
   position: sticky;
   top: 6.511rem;
 }
 .Documentation-toc {
   margin-top: 0;
 }
-.Documentation-toc a {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .Documentation-tocItem {
   display: block;
   position: relative;
@@ -38,88 +32,129 @@
 .Documentation-tocItem + .Documentation-tocItem {
   margin-top: 0.5rem;
 }
-.Documentation-tocItem--selected::before {
-  border-radius: 0.375rem;
-  background-color: #377d9c;
-  content: '';
-  display: block;
-  height: 0.375rem;
-  left: -1.1875rem;
-  position: absolute;
-  top: 0.5625rem;
-  width: 0.375rem;
-}
-/* Needed for higher specificity. */
-.TypesAndFuncs .TypesAndFuncs-list,
-.TypesAndFuncs .TypesAndFuncs-list ul {
-  padding-left: 0;
-}
-.TypesAndFuncs-list {
-  font-size: 0.875rem;
-  margin-top: 0.5rem;
-}
 .is-withSideNav .Documentation-tocItem--index,
 .is-withSideNav .Documentation-index {
   display: none;
 }
 .Documentation-tocItem--constants,
 .Documentation-tocItem--variables,
-.Documentation-tocItem--typesAndFuncs {
+.Documentation-tocItem--functions,
+.Documentation-tocItem--types,
+.Documentation-tocItem--notes {
   display: block;
 }
-
-.TypesAndFuncs-list > .TypesAndFuncs-item:first-of-type {
-  margin-top: 0.5rem;
-  padding-top: 0;
+.Documentation-build {
+  grid-column: span 2;
 }
-.TypesAndFuncs-item {
-  border-left: 0.125rem solid #f0f1f2;
-  padding-left: 0.625rem;
+/* Needed for higher specificity since ul elements rendered within documentation
+   don’t have classes. */
+.DocNav .DocNav-node ul {
+  padding-left: 0;
+}
+.DocNav-node {
+  padding-left: 1.25rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
+  position: relative;
+  user-select: none;
 }
-.TypesAndFuncs > .TypesAndFuncs-item:first-of-type {
-  margin-top: 0.5rem;
-  padding-top: 0;
+.DocNav-node--selected {
+  color: var(--gray-1);
+  font-weight: 500;
 }
-.TypesAndFuncs-item--noBorder {
-  border-left: 0;
-  padding: 0;
+.DocNav-node--selected .DocNav-node:not(.DocNav-node--selected) {
+  color: var(--gray-2);
+  font-weight: 400;
 }
-.TypesAndFuncs-item .TypesAndFuncs-item {
-  border-left: 0.125rem solid #f0f1f2;
-  padding-left: 1.25rem;
+.DocNav-node--selected::before {
+  border-radius: 50%;
+  background-color: var(--turq-dark);
+  content: '';
+  display: block;
+  height: 0.3125rem;
+  left: 0.4688rem;
+  position: absolute;
+  top: 0.6875rem;
+  width: 0.3125rem;
 }
-.TypesAndFuncs-summary {
+.DocNav-node .DocNav-node--selected::before {
+  left: 0.3125rem;
+  top: 0.75rem;
+}
+.DocNav-node--expandable.DocNav-node--selected::before {
+  display: none;
+}
+.DocNav-node .DocNav-node {
+  font-size: 0.875rem;
+}
+.DocNav-node .DocNav-node .DocNav-node {
+  border-left: 2px solid var(--gray-9);
+  padding-left: 0.5rem;
+}
+.DocNav-node .DocNav-node .DocNav-node--selected::before {
+  display: none;
+}
+.DocNav-node .DocNav-node .DocNav-node--selected {
+  border-left: 2px solid var(--turq-dark);
+}
+.DocNav a,
+.DocNav a:link,
+.DocNav a:visited {
+  color: var(--gray-2);
+  display: block;
+  opacity: 1;
+  overflow: hidden;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.DocNav a:hover {
+  color: var(--gray-1);
+}
+.DocNav summary {
   cursor: pointer;
   list-style-type: none;
   outline: none;
   position: relative;
 }
-.TypesAndFuncs-summary::marker {
+.DocNav summary::marker {
   display: none;
 }
-.TypesAndFuncs-summary::-webkit-details-marker {
+.DocNav summary::-webkit-details-marker {
   display: none;
 }
-.TypesAndFuncs-summary::before {
-  border-bottom: 0.3125rem solid transparent;
-  border-left: 0.3125rem solid #606368;
+.DocNav summary::before {
+  border-bottom: 0.25rem solid transparent;
+  border-left: 0.25rem solid #606368;
   border-right: 0;
-  border-top: 0.3125rem solid transparent;
+  border-top: 0.25rem solid transparent;
   content: '';
   display: block;
   height: 0;
-  left: -1.125rem;
+  left: -0.75rem;
   position: absolute;
-  top: 0.4375rem;
+  top: 0.5rem;
+  transition: transform 0.1s linear;
   width: 0;
 }
-.TypesAndFuncs[open] .TypesAndFuncs-summary::before {
-  border-bottom: 0;
-  border-left: 0.3125rem solid transparent;
-  border-right: 0.3125rem solid transparent;
-  border-top: 0.3125rem solid #606368;
-  left: -1.3125rem;
-  top: 0.625rem;
+/* Expandable nodes at this level have smaller text, so adjust for that. */
+.DocNav details details summary::before {
+  left: -0.875rem;
+  top: 0.5625rem;
+}
+.DocNav details[open] > summary {
+  margin-bottom: 0.375em;
+}
+.DocNav details[open] > summary::before {
+  transform: rotate(90deg);
+}
+/* Added to increase hit target on triangle above. */
+.DocNav summary::after {
+  content: '';
+  display: block;
+  height: 100%;
+  left: -1.875rem;
+  position: absolute;
+  top: 0;
+  width: 2rem;
 }
diff --git a/content/static/css/stylesheet.css b/content/static/css/stylesheet.css
index 58b556a..300c415 100644
--- a/content/static/css/stylesheet.css
+++ b/content/static/css/stylesheet.css
@@ -18,7 +18,7 @@
 
   --turq-light: #5dc9e2;
   --turq-med: #00add8;
-  --turq-text: #007d9c;
+  --turq-dark: #007d9c;
 
   --blue: #92e1f3;
   --green: #00a29c;
@@ -45,7 +45,7 @@
 a,
 a:link,
 a:visited {
-  color: var(--turq-text);
+  color: var(--turq-dark);
   text-decoration: none;
 }
 a:hover {
@@ -245,7 +245,7 @@
   z-index: 1;
 }
 .Site-header--dark {
-  background: var(--turq-text);
+  background: var(--turq-dark);
   border: none;
 }
 :target::before {
@@ -562,7 +562,7 @@
   height: 2.5rem;
   font-size: 1rem;
   border-radius: 1rem;
-  background-color: var(--turq-text);
+  background-color: var(--turq-dark);
   color: white;
   padding: 0rem 2rem;
 }
@@ -832,7 +832,7 @@
   font-size: 1.5rem;
 }
 .Documentation a {
-  color: var(--turq-text);
+  color: var(--turq-dark);
   text-decoration: none;
 }
 .Documentation a:hover {
@@ -891,7 +891,9 @@
 
 .Documentation-tocItem--constants,
 .Documentation-tocItem--variables,
-.Documentation-tocItem--funcsAndTypes {
+.Documentation-tocItem--functions,
+.Documentation-tocItem--types,
+.Documentation-tocItem--notes {
   display: none;
 }
 
@@ -915,13 +917,13 @@
   margin: 1rem 0;
 }
 .Documentation-exampleDetailsHeader {
-  color: var(--turq-text);
+  color: var(--turq-dark);
   text-decoration: none;
   outline: none;
   margin-bottom: 2rem;
 }
 .Documentation .example-header {
-  color: var(--turq-text);
+  color: var(--turq-dark);
   font-size: 1rem;
   outline: none;
   padding-top: 0.5rem;
@@ -1041,7 +1043,7 @@
   background: none;
   border-radius: 0.625rem;
   border: 0.0625rem solid var(--gray-8);
-  color: var(--turq-text);
+  color: var(--turq-dark);
   font-size: 1rem;
   max-width: 6.25rem;
   padding: 0.625rem;
@@ -1073,7 +1075,7 @@
 }
 .JumpDialog .JumpDialog-active {
   color: var(--white);
-  background-color: var(--turq-text);
+  background-color: var(--turq-dark);
 }
 
 .ShortcutsDialog-key {
diff --git a/content/static/html/base.tmpl b/content/static/html/base.tmpl
index b3edc9a..f7d7086 100644
--- a/content/static/html/base.tmpl
+++ b/content/static/html/base.tmpl
@@ -10,7 +10,7 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="Description" content="Go is an open source programming language that makes it easy to build simple, reliable, and efficient software.">
-<link href="https://fonts.googleapis.com/css?family=Work+Sans:600|Roboto:400,700|Source+Code+Pro" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Work+Sans:600|Roboto:400,500,700|Source+Code+Pro" rel="stylesheet">
 <link href="/static/css/stylesheet.css?version={{.AppVersionLabel}}" rel="stylesheet">
 {{if (.Experiments.IsActive "sidenav")}}
   <link href="/static/css/sidenav.css?version={{.AppVersionLabel}}" rel="stylesheet">
diff --git a/internal/fetch/dochtml/template.go b/internal/fetch/dochtml/template.go
index d7860d9..aa44e68 100644
--- a/internal/fetch/dochtml/template.go
+++ b/internal/fetch/dochtml/template.go
@@ -36,79 +36,98 @@
 ).Parse(`{{- "" -}}
 {{- if or .Doc .Consts .Vars .Funcs .Types .Examples.List -}}
 <nav class="Documentation-nav">
-	<ul class="Documentation-toc">{{"\n" -}}
-	{{- if or .Doc (index .Examples.Map "") -}}
-		<li class="Documentation-tocItem Documentation-tocItem--selected">
-			<a href="#pkg-overview">Overview</a>
-		</li>{{"\n" -}}
-	{{- end -}}
-	{{- if or .Consts .Vars .Funcs .Types .Examples.List -}}
-		<li class="Documentation-tocItem Documentation-tocItem--index"><a href="#pkg-index">Index</a></li>{{"\n" -}}
-	{{- end -}}
-	{{- if .Examples.List -}}
-		<li class="Documentation-tocItem"><a href="#pkg-examples">Examples</a></li>{{"\n" -}}
-	{{- end -}}
-	{{- if .Consts -}}
-	  <li class="Documentation-tocItem Documentation-tocItem--constants">
-			<a href="#pkg-constants">Constants</a>
-		</li>{{"\n"}}
-	{{- end -}}
-	{{- if .Vars -}}
-		<li class="Documentation-tocItem Documentation-tocItem--variables">
-			<a href="#pkg-variables">Variables</a>
-		</li>{{"\n"}}
-	{{- end -}}
+	<ul class="Documentation-toc DocNav">
+		{{- if or .Doc (index .Examples.Map "") -}}
+			<li class="Documentation-tocItem DocNav-node DocNav-node--selected">
+				<a href="#pkg-overview">Overview</a>
+			</li>
+		{{- end -}}
+		{{- if or .Consts .Vars .Funcs .Types .Examples.List -}}
+			<li class="Documentation-tocItem Documentation-tocItem--index DocNav-node">
+				<a href="#pkg-index">Index</a>
+		  </li>
+		{{- end -}}
+		{{- if .Examples.List -}}
+			<li class="Documentation-tocItem DocNav-node">
+				<a href="#pkg-examples">Examples</a>
+			</li>
+		{{- end -}}
+		{{- if .Consts -}}
+			<li class="Documentation-tocItem Documentation-tocItem--constants DocNav-node">
+				<a href="#pkg-constants">Constants</a>
+			</li>{{"\n"}}
+		{{- end -}}
+		{{- if .Vars -}}
+			<li class="Documentation-tocItem Documentation-tocItem--variables DocNav-node">
+				<a href="#pkg-variables">Variables</a>
+			</li>{{"\n"}}
+		{{- end -}}
 
-	<li class="Documentation-tocItem Documentation-tocItem--funcsAndTypes">
-		<details class="TypesAndFuncs" open>
-			<summary class="TypesAndFuncs-summary">Functions</summary>
-			<ul class="TypesAndFuncs-list">
-				{{- range .Funcs -}}
-					<li class="TypesAndFuncs-item">
-						<a href="#{{.Name}}" title="{{render_short_synopsis .Decl}}">{{render_short_synopsis .Decl}}</a>
-					</li>
-				{{- end -}}
-			</ul>
-		</details>
-	</li>
-	<li class="Documentation-tocItem Documentation-tocItem--funcsAndTypes">
-		<details class="TypesAndFuncs" open>
-			<summary class="TypesAndFuncs-summary">Types</summary>
-			<ul class="TypesAndFuncs-list">
-				{{- range .Types -}}
-					{{- $tname := .Name -}}
-					<li class="TypesAndFuncs-item"><a href="#{{$tname}}">type {{$tname}}</a></li>{{"\n"}}
-					{{- with .Funcs -}}
-						<li class="TypesAndFuncs-item TypesAndFuncs-item--noBorder">
-						  <ul>
-								{{range .}}
-									<li class="TypesAndFuncs-item">
-										<a href="#{{.Name}}" title="{{render_short_synopsis .Decl}}">{{render_short_synopsis .Decl}}</a>
-									</li>
-								{{end}}
-							</ul>
-						</li>
-					{{- end -}}
-					{{- with .Methods -}}
-						<li class="TypesAndFuncs-item TypesAndFuncs-item--noBorder">
-						  <ul>
-								{{range .}}
-									<li class="TypesAndFuncs-item">
-										<a href="#{{$tname}}.{{.Name}}" title="{{render_short_synopsis .Decl}}">{{render_short_synopsis .Decl}}</a>
-									</li>
-								{{end}}
-							</ul>
-						</li>
-					{{- end -}}
-				{{- end -}}
-			</ul>
-		</details>
-	</li>
+		{{if .Funcs}}
+			<li class="Documentation-tocItem Documentation-tocItem--functions DocNav-node DocNav-node--expandable">
+				<details open>
+					<summary>Functions</summary>
+					<ul>
+						{{- range .Funcs -}}
+							<li class="DocNav-node">
+								<a href="#{{.Name}}" title="{{render_short_synopsis .Decl}}">{{render_short_synopsis .Decl}}</a>
+							</li>
+						{{- end -}}
+					</ul>
+				</details>
+			</li>
+		{{end}}
+		{{if .Types}}
+			<li class="Documentation-tocItem Documentation-tocItem--types DocNav-node DocNav-node--expandable">
+				<details open>
+					<summary>Types</summary>
+					<ul>
+						{{range .Types}}
+							{{$tname := .Name}}
+							<li class="DocNav-node DocNav-node--expandable">
+								{{if or .Funcs .Methods}}
+									<details open>
+										<summary>
+											<a href="#{{$tname}}">type {{$tname}}</a>
+										</summary>
+										<ul>
+											{{range .Funcs}}
+												<li class="DocNav-node">
+													<a href="#{{.Name}}" title="{{render_short_synopsis .Decl}}">{{render_short_synopsis .Decl}}</a>
+												</li>
+											{{end}}
+											{{range .Methods}}
+												<li class="DocNav-node">
+													<a href="#{{$tname}}.{{.Name}}" title="{{render_short_synopsis .Decl}}">{{render_short_synopsis .Decl}}</a>
+												</li>
+											{{end}}
+										</ul>
+									</details>
+								{{else}}
+									<a href="#{{$tname}}">type {{$tname}}</a>
+								{{end}} {{/* if or .Funcs .Methods */}}
+							</li>
+						{{end}} {{/* range .Types */}}
+					</ul>
+				</details>
+			</li>
+		{{end}}
 
-	{{- range $marker, $item := .Notes -}}
-	<li><a href="#pkg-note-{{$marker}}">{{$marker}}s</a></li>
-	{{- end -}}
-	</ul>{{"\n" -}}
+		{{if .Notes}}
+			<li class="Documentation-tocItem Documentation-tocItem--notes DocNav-node DocNav-node--expandable">
+				<details open>
+					<summary>Notes</summary>
+					<ul>
+						{{range $marker, $item := .Notes}}
+							<li class="DocNav-node">
+								<a href="#pkg-note-{{$marker}}">{{$marker}}s</a>
+							</li>
+						{{end}}
+					</ul>
+				</details>
+			</li>
+		{{end}}
+	</ul>
 </nav>
 {{- end -}}