nav TOC Component

Table of Contents (TOC) is the list of links presentations in vertical manner. It is a kind of navigation layout commonly used to list sub-pages in a scroll down manner.

This component is available starting from v1.13.0.

Sass Styling Parts

There will be a dedicated Sass part to support this component soon.

Javascript Parts

This component does not use any Javascript.

HTML Parts

Bissetii nav-toc component follows the following code pattern:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<nav class="nav-toc">
	<ol>
		<li>
			<h3>Getting Started For Hugo</h3>
			
<img alt="Thumbnail 1"
	src="https://bissetii.zoralab.com/img/thumbnails/default-1200x628.png"
	loading="lazy"/>

			<p>
				Post short description here ....
			</p>
			<p>
				<span>Last Modified:</span>
				<span><b>
					<time>
						Wed, 18 Nov 2020 15:58:09 +0800
					</time>
				</b></span>
			</p>
			<p>
				<span>Link:</span>
				<span><b>
					<a href="..URL..">
						URL to Page
					</a>
				</b></span>
			</p>
		</li>
		<li>
			<h3>Getting Started For Hugo</h3>
			
<img alt="Thumbnail 2"
	src="https://bissetii.zoralab.com/img/thumbnails/default-1200x628.png"
	loading="lazy"/>

			<p>
				Post short description here ....
			</p>
			<p>
				<span>Last Modified:</span>
				<span><b>
					<time>
						Wed, 18 Nov 2020 15:58:09 +0800
					</time>
				</b></span>
			</p>
			<p>
				<span>Link:</span>
				<span><b>
					<a href="..URL..">
						URL to Page
					</a>
				</b></span>
			</p>
		</li>
	</ol>
</nav>

This will render as:

Epilogue

That’s all for nav-toc component from Bissetii. If you have questions, please feel free to raise your queries in our Issues Section.