0.1.1 • Published 9 months ago
@hackersgarage.dev/tableofcontents v0.1.1
Table Of Contents
The TableOfContents custom web component provides a responsive
navigation aid that allows users to quickly jump between sections in
your document. It automatically observes headings and adjusts its
behavior based on viewport size.
Features
- Responsive Design: Automatically toggles between dropdown mode for narrow viewports and inline display for wider ones.
- Dynamic Content: Observes heading elements with IDs, updating the table of contents as users scroll through the page.
- Accessibility: Utilizes
aria-currentattribute to highlight the currently active section.
Installation
To use this component in your project:
- Ensure your environment supports custom web components (i.e., a modern browser or polyfill).
- Include the JavaScript file containing the
TableOfContentsclass in your HTML document. - Add the
<table-of-contents>element where you want the table of contents to appear.
Usage
Ensure that your document headings have corresponding id attributes
to enable automatic observation and updating of the table of contents.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<script defer src="https://cdn.jsdelivr.net/npm/@hackersgarage.dev/tableofcontents@0.1.1/tableofcontents.min.js"></script>
</head>
<body>
<table-of-contents min-width="600px">
<details>
<summary>Jump to Section</summary>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#installation">Installation</a></li>
<!-- Add more sections as needed -->
</ul>
</details>
</table-of-contents>
</body>
</html>Customization
min-width: Defines the minimum viewport width (in pixels) at which the table of contents will switch from dropdown to inline display. It is specified with the 'px' suffix.
Source code
You can explore the source code of this component here.