The Table of Contents Block automatically generates a structured navigation menu based on the headings within your content. This DigiBlocks Theme block is perfect for creating custom single post and page templates using the Site Builder feature from our DigiFusion theme and its Pro version, helping readers navigate long-form content with ease.
Adding the Table of Contents Block
Navigate to the post or page where you want to display the table of contents. Click the block inserter (+) and search for “Table of Contents” in the DigiBlocks Theme category. The block will automatically scan your content for headings and generate a preview in the editor.
General Configuration
Display Options
Control the basic appearance and functionality using the toggle switches in the Options panel:
Show Title – Displays a customizable title above the table of contents
When the title is enabled, you can customize:
Title – Enter custom text for the table of contents heading
Title Tag – Choose the HTML tag for the title (H2, H3, H4, H5, H6, or Div)
Alignment – Set the horizontal alignment of the entire table of contents block with responsive controls for desktop, tablet, and mobile devices
Content Settings
Heading Selection
Configure which headings to include in your table of contents:
Headings to Include – Choose from three options:
- H2 Only – Includes only H2 headings
- H2 and H3 – Includes H2 and H3 headings
- H2, H3, and H4 – Includes H2, H3, and H4 headings
Maximum Depth – Set the deepest heading level to include (1-6)
List Type – Choose between unordered list (bullet points) or ordered list (numbers)
Behavior Options
Scrolling Configuration
Enable Smooth Scrolling – Provides smooth animated scrolling when users click table of contents links
Scroll Offset – Adjust the scroll position by pixels to account for sticky headers or add extra spacing above the target heading
SEO and Accessibility
Enable SEO Markup – Adds structured data markup for better search engine understanding
Collapsible Functionality
Show as Collapsible – Transforms the table of contents into an expandable/collapsible component
When collapsible mode is enabled:
Initially Collapsed – Determines whether the table of contents starts in a collapsed state
Minimize Box Design – Places the toggle button in the top-right corner for a cleaner appearance
Toggle Button Text – Customize the text for both show and hide states of the collapse button
Dimensions
Size Controls
Width – Set the width of the table of contents block with responsive controls and multiple unit options (%, px)
Max Width – Define the maximum width to prevent the block from becoming too wide on larger screens (px, %, em, rem)
List Item Spacing – Control the vertical spacing between individual table of contents items with responsive values
Styling Options
Color Customization
The Colors panel includes both normal and hover state tabs:
Normal State Colors:
- Background Color – Set the background color for the entire table of contents container
- Title Color – Choose the color for the table of contents title
- Text Color – Set the color for list text and UI elements
- Link Color – Define the default color for table of contents links
- Border Color – Choose the border color when borders are enabled
Hover State Colors:
- Link Hover Color – Set the color links change to when users hover over them
Typography Settings
Title Typography – Configure the appearance of the table of contents title:
Font Family – Select from available Google Fonts
Font Size – Responsive controls with pixel, em, or rem units
Font Weight – Select from available font weights
Font Style – Normal or italic styling
Text Transform – None, uppercase, lowercase, or capitalize
Text Decoration – Add underline, overline, or line-through effects
Line Height – Control line spacing with em or pixel units
Letter Spacing – Adjust character spacing with responsive controls
Content Typography – Style the table of contents list items independently from the title with the same typography options
Borders and Shadow Effects
Border Style – Choose from none, solid, dashed, dotted, or double border styles
Border Width – Set individual border widths for each side with responsive controls
Border Radius – Round the corners of the table of contents container with responsive values
Box Shadow – Add drop shadows with both normal and hover states, including:
- Horizontal and vertical offset controls
- Blur and spread radius settings
- Shadow color selection
- Inset or outset positioning options
Spacing Controls
Padding – Set internal spacing around the table of contents content with responsive dimension controls for each side
Margin – Define external spacing around the entire block with responsive controls
Advanced Features
Animation Effects
Add entrance animations to make the table of contents more engaging when it enters the viewport. Choose from fade, slide, zoom, bounce, and other animation options with a preview button to test effects.
Visibility Controls
Control when the table of contents appears across different devices:
Hide on Desktop – Conceals the block on desktop screens
Hide on Tablet – Hides the block on tablet devices
Hide on Mobile – Removes the block from mobile displays
Additional Options
HTML Anchor – Create a unique web address for linking directly to the table of contents block
Additional CSS Classes – Add custom CSS classes for advanced styling with external stylesheets
Frontend Functionality
On the frontend, the Table of Contents Block provides several interactive features:
Automatic Generation
The block automatically scans your content and generates links to all matching headings based on your configuration settings.
Smooth Scrolling
When enabled, clicking any table of contents link smoothly scrolls to the target heading with the specified offset.
Collapsible Interface
If configured as collapsible, users can expand or collapse the table of contents using the toggle button.
SEO Benefits
With SEO markup enabled, the table of contents provides structured data that search engines can use to better understand your content organization.
Best Practices
For optimal results with the Table of Contents Block:
Ensure your content uses proper heading hierarchy with H2 as main sections and H3/H4 as subsections. Add meaningful anchor IDs to your headings for more descriptive URLs. Configure the scroll offset to account for any sticky headers in your theme. Use the collapsible feature for longer tables of contents to save screen space.
The block works seamlessly with the DigiFusion theme’s Site Builder feature, making it perfect for creating custom post templates that automatically include navigation for long-form content.